微信小程序长文本点击折叠效果

1.WXML:

 <view class='desc'>
    <view class="content {{isFolded?'hide':'show'}}">
      <text >{{description}}</text>
    </view>
    <!--切换 -->
    <view wx:if="{{widgetHeight <120}}" bindtap="foldChange" class="state">{{isFolded?'展开':'收起'}}</view>
  </view>

2.WXSS:

.desc {
  padding-top: 35rpx;
  padding-bottom: 60rpx;
  width: 100%;
  background: white;
}

.content {
  /* 首行缩进8% */
  text-indent: 8%;
  /* height: 500rpx; */
  font-family: '微软雅黑';
  width: 90%;
  margin: 0 auto;
  font-size: 28rpx;
  line-height: 50rpx;
  background-color: white;
  /*关键属性（必须有的）  */
  display: -webkit-box;
  /*规定子元素的排列方向 */
  -webkit-box-orient: vertical;
  /* 当溢出是隐藏 */
  overflow: hidden;
  text-overflow: ellipsis;
}

.hide {
  -webkit-line-clamp: 4;
  /* 透明度,半透明 */
  opacity: 0.75;
}

.show {
  -webkit-line-clamp: 0;
  opacity: 1;
}

.state {
  color: cyan;
  float: right;
  font-size: 30rpx;
  margin-right: 30rpx;
  margin-top: 5rpx;
}

3.JS:

Page({

  data: {
    isFolded: true,
    description:'',//
  },
    
  // ==========改变点击状态=================
  foldChange: function(e) {
    this.setData({
      isFolded: !this.data.isFolded,
    })
  },
})