关于微信小程序文本展开/收起功能的操作教程分享

【春哥博客技术教程分享】在开发微信小程序的过程中，经常会需要各种方便一点的功能，春哥团队技术大东在操作过程中就经常遇到，比如：有时候文本需要实现这样的功能： 
1、文本超过n行显示省略号； 
2、省略时，显示 展开/收起 按钮； 
3、文本不超过n行时，不显示省略号和展开/收起按钮。

实现思路

文本过长显示省略号、展开和收起功能，通过css样式即可实现 
判断是否显示展开/收起按钮： 
通过嵌套元素，可以实现text既显示省略号，其高度又是全显示时的高度 
通过SelectorQuery选择器，获取text及其父元素的高度，判断text高度是否超过其父元素高度，决定是否显示展开/收起按钮即可

代码

wxss

1. .frame {
2. width: 100%;
3. max-height: 206rpx;
4. text-align: left;
5. display: -webkit-box;
6. overflow: hidden;
7. text-overflow: ellipsis;
8. word-wrap: break-word;
9. white-space: normal !important;
10. -webkit-line-clamp: 3;
11. -webkit-box-orient: vertical;
12. }
13. .nofold {
14. display: block;
15. text-overflow: unset;
16. -webkit-line-clamp: unset;
17. max-height: unset;
18. }

frame样式设置最大高度，超过3行后出现省略号。overflow为hidden，使得text的超出父元素部分隐藏掉。nofold样式则将最大高度、出现省略号的行数去除，以展示全文。

wxml

1. <view id="frame" class='frame {{fold == false ? "nofold":""}}'>
2. <text id="content">{{detail}}</text>
3. </view>

wxml中，在view元素中嵌套text元素。样式写在view中，text不加任何样式（重要）。分别写上id，方便js代码获取其尺寸信息。 
javascript

1. var query = this.createSelectorQuery();
2. query.select('#content').boundingClientRect();
3. query.select('#frame').boundingClientRect();
4. query.exec(function(res) {
5. if (res[0] && res[0].height) {
6. if (res[0].height > res[1].height) {
7. self.setData({
8. fold: true,
9. });
10. } else {
11. self.setData({
12. fold: null,
13. });
14. }
15. }
16. })

js代码中，通过选择器获取两者的高度，如果text高度高于view，则说明有省略文本，显示展开/收起按钮。 
js的选择器如果是写在onshow/onload方法中，最好加上延迟，以防止出现判断时元素尚未渲染出来的情况。

今天就和大家分享到这里，如果有更多关于小程序开发的问题欢迎到春哥技术源码论坛区留言、探讨。