微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮

微信小程序列表实现文字内容超出隐藏并显示全文/收起按钮
针对这个功能，产品的需求如下
由于我们项目是教育类产品所以这里这个功能会用在发动态这里，就像微信朋友圈那样，我们叫班级圈。
用户发班级圈时，可以发布文字内容、图片、视频，文字可以输入500个字。这样的话，如果列表一次展示全部文字，如果用户真有500个文字就基本一条动态占用了整屏高度，对于用户体验来说，用户一眼看到的东西太少了，所以产品就提出了需要折叠文字需求，并说明文字需要满6行的时候折叠，并显示全文按钮，当用户点击全文按钮时要展开所有内容，当点击收起按钮又变回折叠状态。

说完需求，现在来说说问题
首先，开发过小程序的朋友都知道，小程序内部是无法操作dom的，也就是说根本没有dom这个东西。
但是，需求是需要内容满足6行，并且满足6行后才显示全文按钮，才可以操作，如果是不满足六行的，是不应该显示全文按钮的，直接正常展示就行，这里问题就来了。

如何折叠文本，让文本超出隐藏？
如果小程序不能操作dom，如何判断显示全文按钮？
我的解决方案
第一个问题
其实第一个问题不是问题，因为我们都知道文本多行超出隐藏是可以直接使用css就能解决的，所以下面我就直接贴出实现代码

  display: -webkit-box;
  word-break: break-all;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 7;
第二个问题
下面我们来说说第二个问题，如何去判断满足6行就显示全文按钮。
虽说小程序是不能操作dom的，但是能不能获取到dom的一些信息呢？
答案是可以的，小程序API确实提供了一套能够去获取节点上的一些信息接口，接口名叫createSelectorQuery，创建一个选择器对象，通过选择器对象提供的方法去做一些操作，这里我们需要用到选择器对象的两个方法

select('css selector')
boundingClientRect(fn)
首先，通过select去选择我们需要获取信息的节点，参数是css的选择器，只能选择单个节点，如果需要选择多个节点可使用selectAll。然后再通过boundingClientRect方法查询布局的位置请求，相对于显示区域，以像素为单位。其功能类似于DOM的getBoundingClientRect。
该方法参数可接受一个回调，回调参数接受一个查询到的信息对象，其对象有以下信息

id ：节点ID
dataset： 节点的dataset
left： 节点的左边界坐标
right： 节点的右边界坐标
top：节点的上边界坐标
bottom：节点的下边界坐标
width： 节点的宽度
height： 节点的高度
下面是一个完整示例

Page({
  getRect () {
    wx.createSelectorQuery().select('#the-id').boundingClientRect(function(rect){
      rect.id      // 节点的ID
      rect.dataset // 节点的dataset
      rect.left    // 节点的左边界坐标
      rect.right   // 节点的右边界坐标