微信小程序-控制文本的显示及隐藏（当文字超出两行时，设置为可点击并进入查看详情页面）

参考文章

1、微信小程序文本展开、收起功能
2、微信小程序文字超过行后隐藏并且显示省略号

需求描述

显示消息内容，超出两行部分隐藏。当有隐藏内容时，该卡片设为可点击，进入消息详情页面。

代码

1、wxml

<view class="message_content_bottom" bindtap="{
     
     {isOpen ? 'openMessageDetail' : '' }}>
    <!--这里一定要是text!!!!!!!!!!!!!!!-->
    <text class="content_bottom">{
   
   {content}}</text>
</view>

2、wxss

 .message_content_bottom{
    
    
        width: 100%;
        font-size: 14px;
        /*以下内容是文字隐藏所必须的*/
        display: -webkit-box;
        word-break: break-all;/*换行规则*/
        text-overflow: ellipsis;/*最后使用省略号显示*/
        overflow: hidden;/*超出部分隐藏*/
        -webkit-box-orient: vertical;
        -webkit-line-clamp:2;/*能够显示几行*/
        line-height: 20px; /*行高，固定写死。后续将会使用它*/
}

3、.js

Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
  		content:"嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟嘟",
  		//记录是否可点击
  		isOpen:false
  },

  //主要部分：对消息进行处理-超过两行显示时，可以点击进入查看详情页面
  hidenMore(type) {
    
    
    let that = this;
    let isOpen = false;
    const query = wx.createSelectorQuery();
    query.selectAll('.content_bottom').fields({
    
    
      size: true,
    }).exec(function (res) {
    
    
      let ress = res[0];
      let lineHeight = 20 //样式中写死的行高，单位px
      for (let i = 0; i < ress.length; i++) {
    
    
        if (ress[i].height / lineHeight > 2) {
    
    
            isOpen = true;
        }
      }
      that.setData({
    
    
        isOpen : isOpen 
      })
    }) 
  },
})