小程序展开收缩文字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
    })
  },

})

 

转载于:https://www.cnblogs.com/520BigBear/p/10454814.html