微信小程序文本查看更多和收起

微信小程序文本查看更多和收起

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

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

实现功能，记录此次开发经验，以便当做笔记查询。

实现思路：

1. 文本过长显示省略号、展开和收起功能，通过css样式即可实现

2. 判断是否显示展开/收起按钮：

3. 通过嵌套元素，可以实现text既显示省略号，其高度又是全显示时的高度

4. 通过SelectorQuery选择器，获取view及其父元素的高度，判断view高度是否超过其父元素高度，决定是否显示展开/收起按钮即可

   结构

   <view class="describe">
   	<view class='{{readmore.status ? "hidden" : "content"}}'>
           <view>
           {{introduce}}
           </view>
   	</view>
   	<view wx:if="{{colNumShow}}" class='readmore-tip' bindtap='toggle'>{{readmore.tip}}</view>
   </view>
   

css，给文本设置行高，方便计算文本行数

.content {
   background: rgba(255, 255, 255, 1);
}
 
.content view {
   width: 100%;
   font-size: 30rpx;
   font-weight: 400;
   color: rgba(0, 0, 0, 1);
    word-break: break-all;
    line-height: 40px;//行高，方便计算文本行数
}

/* 超出3行隐藏多余部分并且显示省略号 */

.hidden {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   line-height: 40px;//行高，方便计算文本行数
}

.readmore-tip {
   padding-top: 30rpx;
   background: rgba(255, 255, 255, 1);
   text-align: right;
   font-size: 24rpx;
   font-weight: 400;
   color: rgba(128, 128, 128, 1);
}

js实现

获取数据，把数据全部渲染；获取当前文本的高度，除以行高计算行数，超过三行则隐藏

data:{
 readmore: {
     status: false,
     tip: '收起'
  },
  colNum:0,
  colNumShow:true,
  introduce:"我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容
  我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容我是内容"
},
 onLoad: function(options) {
 	this.getData();
 },
 getData(){
 	//获取数据后渲染结构再计算文本行高
 		获取数据
    //创建节点选择器
      var query = wx.createSelectorQuery//查询节点信息的对象
      query.select('.content').boundingClientRect();//添加节点的布局位置的查询请求
      query.exec( (res)=> { //执行所有的请求。请求结果按请求次序构成数组，在callback的第一个参数中返回
        res[0].height;
      //   console.log("height==", res[0].height)
        var height = res[0].height;
        //25为css里设置的view的line-height
        let colNum = height/40;//40px为css里设置的view的line-height
      //   console.log("行数==", colNum )
        if(colNum > 3){
         self.setData({
            readmore: {
               status: true,
               tip: self.data.status ? '收起' : '查看更多'
            }
           })
        }else{
            self.setData({
               colNumShow:false
            })
        }
        self.setData({
          colNum: colNum,
        })
 },
 //切换
 toggle() {
      const status = this.data.readmore.status
      this.setData({
         readmore: {
            status: !status,
            tip: status ? '收起' : '查看更多'
         }
      })
   },