微信小程序获取节点信息，实现文本内容部分隐藏点击查看更多效果

一、需求

最近在做一个类似朋友圈的功能，然后需要对用户发布的动态进行处理，如果内容过多，需隐藏部分内容，等用户点击按钮后再展示全部动态；内容少的部分，就不需要显示按钮了。

二、问题及解决方案

1、设置内容超出隐藏效果

这个比较简单，只要在元素上设置样式：max-height和overflow：hidden，然后点击按钮的时候动态修改max-height的值就可以了。需要隐藏的话，max-height设置为一个固定值；展示的话就设置为max-height：100%

2、如何判断内容超出设定的高度

这个是本篇重点，如何判断内容超出设定的高度，展示‘查看更多’按钮呢？一开始自己想到的方案是：判断内容长度，粗略的估算固定高度下能放多少个字符长度，超过这个长度后展示按钮。但是，显然这样做是不合理的，因为移动端的设备宽度是不固定的，所以能展示的字符长度也会不一样。后来在朋友帮助下，找到了第二种方案：首先给文字内容设置个line-height值，然后估算下固定高度下能展示多少行，接着用js获取节点元素的初始高度，用初始高度除以line-height值，就可以得到行数，最后判断行数是否超出我们能展示的行数就可以了。（ps：这里的line-height和固定的高度值单位我都是用的px，因为小程序的rpx是一个相对单位，而js获取到的节点高度又是以px作为单位的，所以如果不这么做的话，就需要自己把line-height的值转化成px了，这样才不会出错）

三、相关代码

1、小程序获取节点信息（传送门）

hidenMore() {  //判断是否需要隐藏部分内容,显示查看更多按钮
    let that = this;
    const query = wx.createSelectorQuery();
    query.selectAll('.trends-content').fields({
      size: true,
    }).exec(function (res) {
      console.log(res, '所有节点信息')
      let lineHeight = 20 //样式中写死的行高，单位px

      for (let i = 0; i < res.length; i++) {
        if (res[i].height / lineHeight > 4) {
          that.data.trendsList[i].auto = true;
          that.data.trendsList[i].seeMore = true;
        }
      }
      that.setData({
        trendsList: that.data.trendsList
      })
    }) 
  },

用微信自带的接口selectAll获取所有内容节点，然后fields获取节点信息（size：true则返回节点的width和height信息），最后在exec回调里面循环处理判断每一个节点是否超出设置的行数即可

2、分页后处理

上拉到底后，重新请求下一页数据，然后先渲染到界面上（这样才能获取到节点的初始高度）再执行下上面的函数就可以了，以下是自己的模拟测试的分页代码：

/**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    console.log('下拉到底了')
    
    let that = this;
    let data = [
      {
        like: false,
        content: '加班，加班加班，，，，加班偶尔卡佛空空，哦哦哦哦哦，耶耶耶耶耶耶一样一样，是大佛偶奇偶水电费累计二硫键。Nice Day!!!!',
        imgList: ['http://img5.imgtn.bdimg.com/it/u=3078928248,3766681737&fm=26&gp=0.jpg', 'http://img2.imgtn.bdimg.com/it/u=79065350,2707470102&fm=26&gp=0.jpg', 'http://img3.imgtn.bdimg.com/it/u=2864357019,3325808128&fm=26&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=3100245995,4228596785&fm=26&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=3914307814,2094675132&fm=26&gp=0.jpg', 'http://img1.imgtn.bdimg.com/it/u=3709335122,3271690155&fm=26&gp=0.jpg']
      },
      {
        like: false,
        content: '加班额，的佛教哦圣诞节佛教速度佛教，角斗士，，速度佛教二纬路。打扫房间偶就饿了就，都放假二姐夫乐山大佛！我的减肥就链接连接，第三方Joe加了景深了都放假了，是打飞机了金圣诞服的身份的。的风口老的快，邒贷方金额基金，的是否让他们滑雪场V领。',
        imgList: ['http://img5.imgtn.bdimg.com/it/u=3078928248,3766681737&fm=26&gp=0.jpg', 'http://img2.imgtn.bdimg.com/it/u=79065350,2707470102&fm=26&gp=0.jpg', 'http://img3.imgtn.bdimg.com/it/u=2864357019,3325808128&fm=26&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=3100245995,4228596785&fm=26&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=3914307814,2094675132&fm=26&gp=0.jpg', 'http://img1.imgtn.bdimg.com/it/u=3709335122,3271690155&fm=26&gp=0.jpg']
      },
      {
        like: false,
        content: '的身份的身份的身份的身份的身份的身份，适当反抗六点十分看的身份的身份电视看放累计，第三方就偶尔加福禄寿大家纷纷功夫买的，腐恶偶然，的身份圣诞服建瓯市都放假偶滴神，地方就是东方今儿就发牢骚，水电费了水电费Joe。得失分开发商的身份的身份但是的开发跨度十分，我的数据佛教偶家。',
        imgList: ['http://img5.imgtn.bdimg.com/it/u=3078928248,3766681737&fm=26&gp=0.jpg', 'http://img2.imgtn.bdimg.com/it/u=79065350,2707470102&fm=26&gp=0.jpg', 'http://img3.imgtn.bdimg.com/it/u=2864357019,3325808128&fm=26&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=3100245995,4228596785&fm=26&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=3914307814,2094675132&fm=26&gp=0.jpg', 'http://img1.imgtn.bdimg.com/it/u=3709335122,3271690155&fm=26&gp=0.jpg']
      },
      {
        like: false,
        content: '是大佛饿哦俯拾地圣诞服的身份。。。芥佛时代峻峰，速度佛的缩放但是、、、、教偶尔接时代峻峰，第三方Joe减减肥角斗士否决',
        imgList: ['http://img5.imgtn.bdimg.com/it/u=3078928248,3766681737&fm=26&gp=0.jpg', 'http://img2.imgtn.bdimg.com/it/u=79065350,2707470102&fm=26&gp=0.jpg', 'http://img3.imgtn.bdimg.com/it/u=2864357019,3325808128&fm=26&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=3100245995,4228596785&fm=26&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=3914307814,2094675132&fm=26&gp=0.jpg', 'http://img1.imgtn.bdimg.com/it/u=3709335122,3271690155&fm=26&gp=0.jpg']
      },
      {
        like: false,
        content: 'nice day！！！！！打飞机搜集of就。。。圣诞服的身份00000，的数据佛教饿哦就凡事都金佛山几点发，慰问金佛得减肥都放假，的佛教哦额就是对于覅和IEhihi但是覅很多方面第三方没地方喝水都会覅电话费没打算父母好地方和，角斗士都是非法的发顺丰。',
        imgList: ['http://img5.imgtn.bdimg.com/it/u=3078928248,3766681737&fm=26&gp=0.jpg', 'http://img2.imgtn.bdimg.com/it/u=79065350,2707470102&fm=26&gp=0.jpg', 'http://img3.imgtn.bdimg.com/it/u=2864357019,3325808128&fm=26&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=3100245995,4228596785&fm=26&gp=0.jpg', 'http://img0.imgtn.bdimg.com/it/u=3914307814,2094675132&fm=26&gp=0.jpg', 'http://img1.imgtn.bdimg.com/it/u=3709335122,3271690155&fm=26&gp=0.jpg']
      }];

    wx.showLoading({
      title: '加载中',
    })

    if(!this.data.reachBottom){
      this.data.reachBottom = true
      setTimeout(() => {
        wx.hideLoading()
        that.data.trendsList = that.data.trendsList.concat(data)
        that.setData({
          trendsList: that.data.trendsList
        })
        that.hidenMore()
        console.log(that.data.trendsList)
        this.data.reachBottom = false
      }, 1000)
    }

  },

四、效果

 

五、总结

这边有两个不好的地方：1、每次请求到数据后都要先setData渲染到页面后，再执行获取节点判断是否要显示按钮的操作，最后再次setData渲染到页面，这样多次的操作setData是很消耗性能的；2、每次都是从新获取页面所有的节点，相当于每次都要对处理过的节点重新进行处理。这是两个还没有解决的问题，如果大家有好的建议，欢迎评论指教。