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

思路

• 利用图片加载（头像）事件，计算评论高度，line-height指定为x,y行就是xy px,
• 如果评论高度大于xy，则显示展开按钮
• 展开按钮：点击去除限制只显示y行的css显示，内容就全部显示了。

代码

 <image 
 binderror="listenCommentUserAvatarLoadError" 
 bindload="listenCommentUserAvatarLoad" 
 data-idx="{{idx}}" 
 lazy-load  src="xxxxxxxxxx" />

在图片加载和失败事件中，进行监听

   /**
     * 评论头像加载成功调用
     * @param {*} e
     */
    listenCommentUserAvatarLoad(e) {
      const idx = e.currentTarget.dataset.idx
      this.updateExtendShow(idx)
    },
    /**
     * 评论头像加载失败调用
     * @param {*} e
     */
    listenCommentUserAvatarLoadError(e) {
      const idx = e.currentTarget.dataset.idx
      this.updateExtendShow(idx)
    },
    /**
     * 评论内容ID下标
     * @param {Number} commentIdx
     */
    updateExtendShow(commentIdx) {
      var query = wx.createSelectorQuery()
      query
        .select(`#comment-rich-text-${commentIdx}`)
        .boundingClientRect((rect) => {
          if (rect != null) {
            const height = rect.height
            if (height > 132) { //Line-height 22 * 6 行
              this.data.posts[commentIdx]['extendStr'] = true
              this.data.posts[commentIdx]['extendStrBtn'] = true
              this.setData({
                posts: this.data.posts
              })
            }
            this.printLog({ rect })
          }
        })
        .exec()
    }

在updateExtendShow方法中计算是否展示展开按钮

 <rich-text 
	 id="comment-rich-text-{{idx}}" 
	 nodes="{{ item.content }}" 
	 class="r-content {{!!item.extendStr ? 'r-content-simple' : ''}}" 
	 style="-webkit-line-clamp:{{item.extendStrBtn?6:7}}">
 </rich-text>
 <view 
	 wx:if="{{item.extendStrBtn}}" 
	 bindtap="tapViewExtendComment" 
	 data-idx="{{idx}}">展开</view>

样式

r-content {
  letter-spacing: 2rpx;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #666666;
  letter-spacing: 0;
  /* line-height: 40rpx; */
  line-height: 22px;
  word-wrap: break-word;
}
.r-content-simple {
  overflow: hidden;
  text-overflow: clip;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7
}

效果