小程序怎么實(shí)現(xiàn)“全文收起”功能？下面本篇文章小程序?qū)崿F(xiàn)多行文本“全文收起”功能的方法，希望對(duì)大家有所幫助！
小程序里經(jīng)常會(huì)碰到需要實(shí)現(xiàn)多行文本”全文收起“功能，在掘金上有搜索到用純css實(shí)現(xiàn)。親測(cè)：ios很完美，andriod上的無(wú)效。
小程序社區(qū)有很多方案，目前在社區(qū)有看到一位大佬使用js動(dòng)態(tài)計(jì)算告訴去實(shí)現(xiàn)，親測(cè)大致有效果，測(cè)試后，在一些特殊情況下，計(jì)算會(huì)有誤差，所以有更改些許代碼。
一、需求
位于多行文本右下角，展示”全文/收起“按鈕
“展開”和“收起”兩種狀態(tài)的切換
當(dāng)文本不超過(guò)指定行數(shù)時(shí)，不顯示”全文/收起“按鈕
文本顯示【全文】展示狀態(tài)下，更新數(shù)據(jù)，文本不被收起
二、實(shí)現(xiàn)思路
1、多行文本截?cái)?/strong>
主要用到用到 line-clamp，關(guān)鍵樣式如下
.text-clamp3 {
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}2、判斷文本是否超出指定行數(shù)，顯示全文 收起 按鈕
編寫兩段文本，一段展示完整的文本A，一段展示使用 line-clamp省略后的文本B，因?yàn)锽有被截取，因此B的高度相對(duì)較小。對(duì)比兩段文本的高度，便可以知道文本是否超出兩行
在小程序里，可以使用wx.createSelectorQuery()獲取文本高度
js
const query = wx.createSelectorQuery().in(this);
query.selectAll(".showArea, .hideArea").boundingClientRect(res => {
console.log(res, 'res')
}).exec()
三、代碼實(shí)現(xiàn)
1、初次版本
根據(jù)設(shè)計(jì)思路，立馬上手代碼
foldable.wxml
<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>foldable.js
/**
* 長(zhǎng)文本內(nèi)容展開與收起
* @param {String} content 長(zhǎng)文本內(nèi)容
* @param {Number} maxLine 最多展示行數(shù)[只允許 1-5 的正整數(shù)]
* @param {String} position 展開收起按鈕位置[可選值為 left right]
* @param {Boolean} foldable 點(diǎn)擊長(zhǎng)文本是否展開收起
* @param { String } onFoldText 收縮時(shí)文字
* @param { String } unFoldText 展開時(shí)文字
*
*/
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
},
// 收縮時(shí)文字
onFoldText: {
type: String,
value: "全文"
},
// 展開時(shí)文字
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 < res[1].height;
this.setData({
width: res[0].width,
showFold,
})
}).exec()
},
handleFold() {
this.setData({
onFold: !this.data.onFold
})
}
}
})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;
}2、修復(fù)版本
正常情況下，此方法可行，但是在級(jí)別文字下，會(huì)計(jì)算錯(cuò)誤。經(jīng)過(guò)測(cè)試，可將 節(jié)點(diǎn)是.hideArea的內(nèi)容定位在.showArea節(jié)點(diǎn)下可解決
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;
}3、增強(qiáng)版本
經(jīng)過(guò)修復(fù)之后，本來(lái)是可以完美實(shí)現(xiàn)了，但是在測(cè)試過(guò)程中，第一次正常渲染是沒(méi)有問(wèn)題。但如果文本數(shù)據(jù)更新，會(huì)發(fā)現(xiàn)如果原來(lái)的文本從一行增加到兩行時(shí)，使用wx.createSelectorQuery()計(jì)算的高度會(huì)有存在是實(shí)際高低的兩倍的現(xiàn)象。導(dǎo)致會(huì)錯(cuò)誤出現(xiàn)【全文】文字。然后文本從兩行增加到三行或者多行都沒(méi)問(wèn)題，不太理解為什么會(huì)出現(xiàn)這個(gè)錯(cuò)誤計(jì)算的現(xiàn)象。（期待大神能留言告知 ? ）
為了彌補(bǔ)這個(gè)坑，我引入了lineHieght這個(gè)屬性。
// foldable.js
Component({
properties: {
lineHieght: {
type: Number,
observer(value) {
if (!(/^[0-9]*$/).test(value)) {
throw new Error(`lineHieght field value can only be digits`)
}
}
}
}
})通過(guò)lineHieght和最多可展示行數(shù)maxLine可以計(jì)算出，可在界面展示的最大高度。
// 文本可見的最大高度 const maxHeight = this.data.lineHieght * this.data.maxLine;
當(dāng)然了，我們也需要適配不同的設(shè)備，而且通過(guò)wx.createSelectorQuery()計(jì)算出來(lái)的結(jié)果是以px為單位的。
所以，行高需要根據(jù)設(shè)備尺寸去改變。因?yàn)槲覀兪且詫挾仁?code>750px尺寸為設(shè)計(jì)稿的，所以根據(jù)wx.getSystemInfoSync()可以獲取設(shè)備信息，進(jìn)而轉(zhuǎn)換成px的尺寸。
// foldable.js
changeRpxToPx(rpxInteger) {
return wx.getSystemInfoSync().windowWidth / 750 * rpxInteger
},因此，更新checkFold方法
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);
// 展示區(qū)域高度（即是可能會(huì)被截取的可見文字）
const showAreaHeight = res[0].height;
// 隱藏區(qū)域的高度（即是完整文本高度，偶然事件會(huì)計(jì)算錯(cuò)誤）
const hideAreaHeight = res[1].height;
// 文本可見的最大高度
const maxHeight = lineHeightToPx * this.data.maxLine;
// 如果是一行文字，偶然計(jì)算錯(cuò)誤，用行高判斷
if (this.data.LineHeight && showAreaHeight <= maxHeight) {
showFold = hideAreaHeight > maxHeight
}
this.setData({
width: res[0].width,
showFold,
})
}).exec()
},4、最終版本
經(jīng)過(guò)上一個(gè)版本，基本功能都已經(jīng)實(shí)現(xiàn)。但是，如果文本超過(guò)最大行數(shù)，并且在展開全文的情況下，更新了文本，此時(shí)，全文/展開按鈕會(huì)展示錯(cuò)誤。
通過(guò)分析代碼可知，在展開全文的狀態(tài)下更新了文本，此時(shí).showArea節(jié)點(diǎn)和.hideArea節(jié)點(diǎn)的高度一致，執(zhí)行代碼let showFold = res[0].height < res[1].height;，會(huì)返回false，因此按鈕會(huì)消失。
因此解決方案為：
// 如果文本超出最大行數(shù)，并且是顯示全文的狀態(tài)下，再次更新了文字
let onFold = false
if (showAreaHeight == hideAreaHeight && showAreaHeight > maxHeight) {
showFold = true
onFold = true
}所以最終版本的checkFold方法是：
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);
// 展示區(qū)域高度（即是可能會(huì)被截取的可見文字）
const showAreaHeight = res[0].height;
// 隱藏區(qū)域的高度（即是完整文本高度，偶然事件會(huì)計(jì)算錯(cuò)誤）
const hideAreaHeight = res[1].height;
// 文本可見的最大高度
const maxHeight = lineHeightToPx * this.data.maxLine;
// 如果是一行文字，偶然計(jì)算錯(cuò)誤，用行高判斷
if (this.data.LineHeight && showAreaHeight <= maxHeight) {
showFold = hideAreaHeight > maxHeight
}
// 如果文本超出最大行數(shù)，并且是顯示全文的狀態(tài)下，再次更新了文字
let onFold = false
if (showAreaHeight == hideAreaHeight && showAreaHeight > maxHeight) {
showFold = true
onFold = true
}
this.setData({
width: res[0].width,
showFold,
onFold,
})
}).exec()
},四、代碼片段
經(jīng)過(guò)多次測(cè)試，修改，最后附上代碼片段：
https://developers.weixin.qq.com/s/GWj19vmC7oxp
各位大神如果有更好的建議，可留言哦~~~
