微信小程序怎么实现“全文收起”功能（微信小程序收起来）

admin537256年前0条评论

小程序里经常会遇到需要实现多行文本”全文收起“性能，在掘金上有搜寻到用纯css实现。亲测：ios很完美，andriod上的有效。

小程序社区有患上多计划，现在在社区有看到一位年夜佬应用js消息盘算告知去实现，亲测年夜致实用果，测试后，在一些特别状况下，盘算会有偏偏差，以是有变动些许代码。

一、需要
位于多行文本右下角，展现”全文/收起“按钮

“开展”以及“收起”两种状态的切换

当文本不高出指定行数时，不显示”全文/收起“按钮

文本显示【全文】展现状态下，更新数据，文本不被收起

二、实现思路
一、多行文本截断

主要用到用到line-clamp，症结样式下列

.text-clamp3 {overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 3;}

二、坚定文天性否越过指定行数，显示全文收起按钮

编写两段文本，一段展现完好的文本A，一段展现应用line-clamp省略后的文本B，因为B有被截取，因而B的高度相对于较小。比照两段文本的高度，就能够通晓文天性否越过两行

在小程序里，能够应用wx.createSelectorQuery()获取文本高度js

const query = wx.createSelectorQuery().in(this);query.selectAll(".showArea, .hideArea").boundingClientRect(res => {console.log(res, 'res')}).exec()

微信小程序怎么实现“全文收起”功能（微信小程序收起来）技术教程

三、代码实现
一、首次版本

依据设想思路，立立即手代码

foldable.wxml

 {{content}}{{content}}{{onFold ? unFoldText : onFoldText}}

foldable.js

 /** * 长文本内容开展与收起 * @param {String} content长文本内容 * @param {Number} maxLine至多展现行数[只许可 1-5 的正整数] * @param {String} position开展收起按钮地位[可选值为 left right] * @param {Boolean} foldable点击长文天性否开展收起 * @param { String } onFoldText 压缩时文字 * @param { String } unFoldText 开展时文字 **/ Component({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: "收起"},},data: {width: null,onFold: false,showFold: false,onReady: false},lifetimes: {attached() {this.getNodeClientReact()this.setData({onReady: true})},},methods: {getNodeClientReact() {setTimeout(() => this.checkFold(), 10)},checkFold() {const query = this.createSelectorQuery();query.selectAll(".showArea, .hideArea").boundingClientRect(res => {let showFold = res[0].height foldable.wxss
.content{
width:100%;
position:relative;
overflow:hidden;
}
.contentInner{
word-break:break-all;
width:100%;
color:#2f3033;
font-size:30rpx;
line-height:1.35;
}
.hideArea{
display:-webkit-box;
overflow:hidden;
position:fixed;
top:100vh;
left:-100vw;
}
.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;
}
二、修复版本
失常状况下，此方法可行，然而在级别文字下，会盘算同伴。通过测试，可将节点是.hideArea的内容定位在.showArea节点下可解决
foldable.wxss
 .hideArea {display: -webkit-box;overflow: hidden;/* position: fixed;top: 100vh;left: -100vw; */position: absolute;top: 0;left: 0;z-index: -1;color: #fff;} 
三、增强版本
通过修复以后，本来是能够完美实现为了，然而在测试进程中，第一次失常渲染是不问题。但如果文本数据更新，会发明如果本来的文本从一行增加到两行时，应用wx.createSelectorQuery()盘算的高度会有存在是实践高低的两倍的征象。以致会同伴浮现【全文】文字。而后文本从两行增加到三行或者多行都没问题，不太明白为甚么会浮现这个同伴盘算的征象。（期待年夜神能留言告知?）