如图所示，在小程序上会出现文字过于太多，显示不全的问题，所以做了一个展开收起的按钮
以下是代码
创建一个html
<view class="content">
<view class="contentInner content-inner-class showArea {
{!onFold ? 'text-clamp' + maxLine : ''}}">{
{
content}}</view>
<view class="contentInner content-inner-class hideArea" style="width: {
{width}}px">{
{
content}}</view>
<view class="foldInner fold-class {
{position === 'right' ? 'flex-end' : 'flex'}}" wx:if="{
{showFold}}">
<text class="fold" catchtap="handleFold">{
{
onFold ? unFoldText : onFoldText}}</text>
</view>
</view>
创建一个js文件
/**
* 长文本内容展开与收起
* @param {String} content 长文本内容
* @param {Number} maxLine 最多展示行数[只允许 1-5 的正整数]
* @param {String} position 展开收起按钮位置[可选值为 left right]
* @param {Boolean} foldable 点击长文本是否展开收起
* @param { String } onFoldText 收缩时文字
* @param { String } unFoldText 展开时文字
* @param { Number } LineHeight 文本的行高，单位是rpx--设计稿是以750为宽度
* 注意：外部元素需要给定内容宽度，才能避免【showArea】【hideArea】的内容宽度不一致问题造成的展开文字的是否显示的错误
*
*/
Component({
// options: {
// addGlobalClass: true
// },
externalClasses: ['content-inner-class', 'fold-class'],
properties: {
content: {
type: String,
observer(val) {
if (this.data.onReady) {
this.getNodeClientReact()
}
}
},
maxLine: {
type: Number,
value: 1,
observer(value) {
if (!(/^[1-5]$/).test(value)) {
throw new Error(`maxLine field value can only be digits (1-5), Error value: ${
value}`)
} else if (this.data.onReady) {
this.getNodeClientReact()
}
}
},
position: {
type: String,
value: "left"
},
foldable: {
type: Boolean,
value: true
},
// 收缩时文字
onFoldText: {
type: String,
value: "全文"
},
// 展开时文字
unFoldText: {
type: String,
value: "收起"
},
lineHeight: {
type: Number,
observer(value) {
if (!(/^[0-9]*$/).test(value)) {
throw new Error(`lineHeight field value can only be digits`)
}
}
}
},
data: {
width: null,
onFold: false,
showFold: false,
onReady: false
},
lifetimes: {
attached() {
this.getNodeClientReact()
this.setData({
onReady: true
})
},
},
methods: {
changeRpxToPx(rpxInteger) {
return wx.getSystemInfoSync().windowWidth / 750 * rpxInteger
},
getNodeClientReact() {
setTimeout(() => this.checkFold(), 100)
},
checkFold() {
const query = this.createSelectorQuery();
query.selectAll(".showArea, .hideArea").boundingClientRect(res => {
let showFold = res[0].height < res[1].height;
const lineHeightToPx = this.changeRpxToPx(this.data.lineHeight);
// 展示区域高度（即是可能会被截取的可见文字）
const showAreaHeight = res[0].height;
// 隐藏区域的高度（即是完整文本高度，偶然事件会计算错误）
const hideAreaHeight = res[1].height;
// 文本可见的最大高度
const maxHeight = lineHeightToPx * this.data.maxLine;
// 如果是一行文字，偶然计算错误，用行高判断
if (this.data.LineHeight && showAreaHeight <= maxHeight) {
showFold = hideAreaHeight > maxHeight
}
// 如果文本超出最大行数，并且是显示全文的状态下，再次更新了文字
let onFold = false
if (showAreaHeight == hideAreaHeight && showAreaHeight > maxHeight) {
showFold = true
onFold = true
}
this.setData({
width: res[0].width,
showFold,
onFold,
})
}).exec()
},
handleFold() {
this.setData({
onFold: !this.data.onFold
})
}
}
})
然后把css样式复制以下
.content {
/* background-color: #ffffff; */
width: 100%;
position: relative;
overflow: hidden;
}
.contentInner {
word-break: break-all;
width: 100%;
color: #2f3033;
font-size: 30rpx;
line-height: 1.35;
/* text-align: justify; */
}
.hideArea {
display: -webkit-box;
overflow: hidden;
/* position: fixed;
top: 100vh;
left: -100vw; */
position: absolute;
top: 0;
left: 0;
z-index: -1;
color: #fff;
}
.foldInner {
padding-top: 10rpx;
color: #6676bd;
font-size: 32rpx;
}
.foldInner .fold {
cursor: pointer;
}
.text-clamp1 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 1;
}
.text-clamp2 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.text-clamp3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.text-clamp4 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 4;
}
.text-clamp5 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.flex {
display: -webkit-box;
display: -webkit-flex;
display: flex;
}
.flex-center {
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
-webkit-align-items: center;
-webkit-justify-content: center;
}
.flex-alignStart {
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: flex-start;
-webkit-align-items: flex-start;
}
.flex-alignCenter {
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: center;
-webkit-align-items: center;
}
.flex-alignEnd {
display: -webkit-box;
display: -webkit-flex;
display: flex;
align-items: flex-end;
-webkit-align-items: flex-end;
}
.flex-between {
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: space-between;
-webkit-justify-content: space-between;
}
.flex-around {
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: space-around;
-webkit-justify-content: space-around;
}
.flex-middle {
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: center;
-webkit-justify-content: center;
}
.flex-end {
display: -webkit-box;
display: -webkit-flex;
display: flex;
justify-content: flex-end;
-webkit-justify-content: flex-end;
}
然后在需要调用的组件里面调用就行了，我这边是做了一个朋友圈的功能，所以需要for循环一下，
<view class='main' wx:for="{
{list}}" wx:key="index" wx:for-item="item">
<view class='nickname'>{
{
item.creator}}</view>
<view class="frcont">
<custom-content content="{
{item.actionContent}}" maxLine="{
{item.maxline}}" lineHeight="{
{40}}" position="{
{item.position}}" foldable="{
{item.foldable}}"></custom-content>
<view class='imgArea' >
<view class="vieImg" wx:for="{
{item.actionimg}}" wx:key="index" wx:for-item="item2">
<image src="{
{item2}}"/>
</view>
</view>
<view class="time">{
{
item.createDate}}</view>
</view>
</view>
父组件的js
list: [
{
id:1,
creator: '',
actionContent: "成功的人生才是完美的人生 成功的人生是努力的人生，是无任何遗憾的人生，是目标明确并为之奋斗的人生，是会把握机遇的人生。哈佛大学对于人生成功曾做过科学的系统的调查和验证，认为人生",
maxline: 2,
position: "right",
foldable: true,
createDate: '',
actionimg: []
}
]