小程序开发实现文字“展开更多”效果

最近在微信小程序界面开发中，经常遇到文字描述太多，UI设计师要求将文字收起，只留两行文字，后面以省略号显示，点击“查看全部”可以展开更多，效果如下图：

先贴上wxml中的代码：

<view class="cmty-desc {{fold ? 'fold' : 'unfold'}}">
    星河时代所处区域为大运新城与龙岗中心城交汇之处。政府对大运新城的定位为集体育运动、居住、商业文化、旅游休闲为一体的城市复合功能区，其高端的规划起点，巨大的政府投入，便捷的交通条件，完善的区域配套，将使片区的城市发展提前十年。星河时代所处区域生态资源丰富，除却龙城公园、龙潭公园、原生态自然公园——马峦山郊野公园、清林径森林公园、龙岗植物园外，正在建设的大运自然公园也围绕于项目区域附近，生态区域优越。
  </view>
  <view class='view-all-layout'>
    <text class='view-all' bindtap='unfold'>{{foldText}}</text>
  </view>

关键的代码在css中：

.cmty-desc {
  margin: 20rpx 20rpx 0rpx 30rpx;
  font-size: 28rpx;
  color: #888;
  //关键属性
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;//结尾以省略号显示
  overflow: hidden;
}

.fold {
  -webkit-line-clamp: 2;//设置折叠之后显示的行数
}

.unfold {
  -webkit-line-clamp: 0;
}

.view-all-layout {
  width: 100%;
  position: relative;
}

.view-all {
  position: absolute;
  right: 30rpx;
  font-size: 26rpx;
  color: #3e79c1;
  padding: 5rpx;
}

最后是js文件添加事件点击的代码：

Page({
  data: {
    fold: true,
    foldText: '查看全部',
  },

  unfold: function (e) {
    var page = this;
    let value = !this.data.fold;
    var text = '';
    if (value) {
      text = '查看全部';
    } else {
      text = '收起全部';
    }
    this.setData({
      fold: value,
      foldText: text
    })
  }

})