微信小程序展开收缩文字demo源码下载

微信小程序展开收缩文字demo效果图：

微信小程序展开收缩文字wxml 代码：

<view class="{{ellipsis?'ellipsis':'unellipsis'}}">五险一金五五险一金险险一金五五险一金险一险一金五五险一金险一险一金五五险一金险一一金五险一金五险一金险一金五五险一金险一金五险一金五险一金五险一金五五险一金险一金五险一金五险一金五险一金五五险一金险一金五险一金五险一金五五险一金五险一金
</view>
<view bindtap='ellipsis'>{{ellipsis?'展开信息 ▽':'收起信息 △'}}</view>

 微信小程序展开收缩文字wxss代码：

/* 修改列数 3行 */
.ellipsis {
    display: -webkit-box;
    -webkit-box-orient:vertical;
    text-overflow: ellipsis;
    overflow:hidden;
    -webkit-line-clamp: 3;
}
/* 展示全部 */
.unellipsis {
  display: -webkit-box;
  -webkit-box-orient:vertical;
  text-overflow: ellipsis;
  overflow:hidden;
  -webkit-line-clamp: 0;
}

 微信小程序展开收缩文字js.代码：

Page({
  data: {
      ellipsis: true,// 文字是否收起，默认收起
  },

  // 收起/展开按钮点击事件
  ellipsis() {
    let that = this;
    // let value = !this.data.ellipsis;
    that.setData({
      ellipsis: !that.data.ellipsis
    })
  },

})