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

微信小程序有时候需要实现的功能：

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

效果图

6666.gif

思路：

文本是否显示省略号，通过css可以实现；
判断是否显示展开/收起按钮；
通过SelectorQuery选择器，获取text及其父元素的高度，判断text高度是否超过其父元素高度，决定是否显示展开/收起按钮即可；

用到的知识点

wx.createSelectorQuery()：返回一个 SelectorQuery 对象实例。
SelectorQuery.exec(function callback)：执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回。
NodesRef.boundingClientRect(function callback)：添加节点的布局位置的查询请求。相对于显示区域，以像素为单位。

代码

js代码中，通过选择器获取两者的高度，如果text高度高于view，则说明有省略文本，显示展开/收起按钮。

<view id="frame" class='frame {{fold == false ? "nofold":""}}'>
    <text id="content">{{detail}}</text>
</view>
<view class="btn" bindtap="click" wx:if="{{fold != null}}">{{fold ? '展开':'收起'}}</view>

js

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

wxss

.frame {
  width: 96%;
  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;
  margin: 10rpx auto;
}
.nofold {
  display: block;
  text-overflow: unset;
  -webkit-line-clamp: unset;
  max-height: unset;
}
.btn{
  width: 90%;
  text-align: center;
  background: lightblue;
  padding: 10rpx;
  margin: 20rpx auto;
}