聊天小程序中的“全文折叠”功能是如何实现的（聊天小程序）？

如何在小程序中实现“全文折叠”功能？下面是一个小程序，实现多行文本的“全文折叠”功能。 我希望这有帮助！

小程序通常需要为多行文本实现“全文折叠”功能。 在掘金上搜索发现可以使用纯CSS来实现。 个人测试：在iOS上完美，但在Android上不行。

小程序社区有很多解决方案。 我现在已经看到社区中一些优秀的人使用 JS 的动态计算指令来实现它。 个人测试总体有效。 经过测试，特殊情况下可能会遇到计算问题。 我遇到错误，需要更改一些代码。

1. 需求是在多行文本的右下角找到全文/折叠按钮，以在展开和折叠状态之间切换。 如果文本未超过指定行数，则不会显示“全文/折叠”按钮。 “开始”按钮文本显示 [全文] 显示状态下，数据更新，文本不折叠。 二、实现思路 1、修剪多行文本主要使用

line-clamp。 主要款式有：

.text-clamp3 { 溢出：隐藏；显示：-webkit-box；-webkit-box-方向：-webkit-line[ k3]clamp: 3;}2 ，判断文本是否超过指定行数并显示全文。 折叠按钮

将文本写入两段，一个显示完整的文本 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()

3. 实现代码 1.初始版本

根据您的设计思路立即开始代码

可折叠.wxml

{{content}} {{content}} {{onFold ? 展开文本： 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[ k3]inner [ k3]class', 'fold-class'], 属性: { 内容: { 类型: String,observer(val) { if (this.data.onReady) { this.getNodeClientReact()}}}, Maxline: {type: number, value: 1, Observric (value) {if (!(/^[1-5]$/).test(value)) { throw new Error(`maxLine field ) value 只是一个数字 (1-5), 错误值: ${value}`) } else if (this.data.onReady) { this.getNode ClientReact() } } } , Position: { type: String, value: "left" },foldable: { type: Boolean, value: true }, // 折叠时的文本 onFoldText: { type: String, value: "Full text" }, // 展开text unFoldText: { type: String, value: "Collapse" }, }, data: { width: null, onFold: false, showFold: false, onReady: false }, 生命周期：{ Attached() { this.getNodeClientReact() this.setData({ onReady: true }) }, }, 方法： { getNodeClientReact() { setTimeout(() => this.checkFold(), 10) }, checkFold() { const query = this.createSelectorQuery(); , .hideArea").boundingClientRect(res => { 让 showFold = res[0].height

foldable.wxss

.content { 宽度: 100%; 溢出: 隐藏;} .内容 tInner { word-break：break-all；宽度：100%；颜色：#2f3033；line-高度：  1.35;} 隐藏; 顶部: 100vh; }.foldInner { padding-top: 10rpx; 颜色: #6676bd; }.foldInner .fold { 光标：指针；}.text-clamp1 { 溢出：隐藏；可见：-webkit-box； -webkit-box-方向：垂直； ]line-clamp: 1;}.text-clamp2 {溢出:隐藏;显示:-webkit-box;  -webkit-box- 方向：垂直； -webkit-line- 夹：2;}.text- 夹 3 {溢出：隐藏：-webkit[ k3]框；-webkit-框-方向：垂直；-webkit-线-夹：  3;}.text-clamp4 {溢出：隐藏；可见：-webkit-box；-webkit-box-方向：-webkit-行- ]clamp: 4;}.text-clamp5 {溢出: 隐藏; 可见: -webkit-box;  -webkit-box-direction: Vertical; -webkit-line-clamp: 5;} 2.修复版本

一般情况下，此方法是可行的，但是，级别文本会导致计算错误。    经过测试，将.hideArea节点的内容放在.showArea节点下即可得出解决方案。  
foldable.wxss
.hideArea { 显示：-webkit-box; /* 位置：固定；左侧：-100vw */ : 0; 左: 0; z- 索引: -1; }3. 增强版
修复后，可能会全面实现。    然而，在测试过程中，最初的正常渲染效果很好。    但是，当我更新文本数据时，我发现 wx.createSelectorQuery() 计算出的高度是实际高度的两倍，因为原始文本从 1 行增加到 2 行。    因此，全文文本无法正确显示。    之后，文本从 2 行增长到 3 行或更多行，没有任何问题。  我不明白为什么会出现这样的误判。    （希望高手留言告知？）

为了弥补这个坑，我们引入了lineHigheght属性。    
//foldable.jsComponent({property: { lineHieght: { type: Number,observer(value) { if (!(/^[0-9]*$/).test(value)) {                                                                                                                                                                                                                 } } } })
界面中可以显示的最大高度可以通过lineHeight和可以显示的最大行数maxLine来计算。    
// 文本最大可显示高度 const maxHeight= this.data.lineHiegt * this.data.maxLine;
当然，你也需要适应不同的设备。  wx.createSelectorQuery()计算的结果以px为单位。    
因此您需要根据设备大小更改行高。    由于我们使用750px的宽度作为设计方案，因此我们可以按照wx.getSystemInfoSync()来获取设备信息并将其转换为px大小。    
//foldable.jschangeRpxToPx(rpxInteger) { return wx.getSystemInfoSync().windowWidth / 750 * rpxIn teger},
所以更新checkFold方法。  
checkFold() { const query = this.createSelectorQuery(); query.selectAll(".showArea, .hideArea").boundingClientRect(res => { let showFold = res[0].height maxHeight } This.setData ({ width: res[0].width, showFold, }) }) .exec()},4. 最终版本
自上一版本以来，已经实现了基本功能。    但是，如果在扩展全文超出最大行数的同时更新正文，则全文/摘录按钮将导致错误。    

如果您分析代码，您将看到文本已更新，全文已展开。  此时，.showArea 和 .hideArea 节点的高度就会匹配。  运行代码 let showFold = res[0].height 返回 false，因此按钮消失。    
解决办法是：  
// 如果文本超过最大行数，显示全文，则再次更新文本 let onFold = falseif (showAreaHeight == HideAreaHeight && showAreaHeight > maxHeight) { showFold = true onFold = true} 
所以checkFol的d方法的最终版本是：  
checkFold() { const query = this.createSelectorQuery(); query.selectAll(".showArea, .hideArea").boundingClientRect(res => { let showFold = res[0].height maxHeight } // 文本如果超过最大行数且显示全文，则再次更新文本 let onFold = false if (showAreaHeight ==  HideAreaHeight && showAreaHeight > maxHeight) { showFold = true onFold = true } this.setData( { width: res[0].width, showFold, onFold, }) }).exec()}, 4. 代码片段经过测试并修改后最后附上代码片段：https://developers.weixin.qq  .com/s/GWj19vmC7oxp 如果您有更好的建议，请留言~~~
【相关学习推荐：小程序开发教程】
PHP快速学习视频免费教程（从初学者到大师）
如何开始学习PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。  您可以保存并下载您想学习的朋友。    
 下载
			


    			
这几篇文章你可能也喜欢：
                 

                                            
浅谈如何利用小程序实现“全文收藏”功能
                                        
                        

                        本文由主机参考刊发，转载请注明：聊天小程序中的“全文折叠”功能是如何实现的（聊天小程序）？ https://zhujicankao.com/141298.html