微信小程序文本展开/收起功能

微信小程序中，有时候文本需要实现这样的功能

1. 文本超过n行显示省略号
2. 省略时，显示 展开/收起 按钮
3. 文本不超过n行时，不显示省略号和展开/收起按钮

效果图

效果图

实现思路

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

代码

• wxss

.frame {
  width: 100%;
  max-height: 206rpx;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-wrap: break-word;
  white-space: normal !important;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.nofold {
  display: block;
  text-overflow: unset;
  -webkit-line-clamp: unset;
  max-height: unset;
}

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

• wxml

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

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

• javascript

var query = this.createSelectorQuery();
query.select('#content').boundingClientRect();
query.select('#frame').boundingClientRect();
query.exec(function(res) {
  if (res[0] && res[0].height) {
    if (res[0].height > res[1].height) {
      self.setData({
        fold: true,
      });
    } else {
      self.setData({
        fold: null,
      });
    }
  }
})

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