微信小程序实现展示/收起切换图标,上下效果(超详细)

我们先来看看

wxml

<view class="appraise-content">
          <text class="evaluate-content {{ellipsis? 'ellipsis': 'unellipsis'}}">日期；约会；年代；枣椰子；过时；注明日期；始于（某一历史时期）；确定…年代；和…约会；(Date)人名；(日)伊达 (姓)；(英)戴特；日期；约会；年代；枣椰子；过时；注明日期；始于（某一历史时期）；确定…年代；和…约会；(Date)人名；(日)伊达 (姓)；(英)戴特；日期；约会；年代；枣椰子；过时；注明日期；始于（某一历史时期）；确定…年代；和…约会；(Date)人名；(日)伊达 (姓)；(英)戴特；日期；约会；年代；枣椰子；过时；注明日期；始于（某一历史时期）；确定…年代；和…约会；(Date)人名；(日)伊达 (姓)；(英)戴特；</text>
          <image class="difference-img content-jian" bindtap="ellipsis" src="{{ellipsis?'../../../img/icon/icon-descend.png': '../../../img/icon/icon-up.png'}}"></image>
        </view>

wxss

.appraise-content {
  font-size: 30rpx;
  /* font-weight: 500; */
}
.evaluate-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

.ellipsis {
  -webkit-line-clamp: 5;
  opacity: 0.75;
}

.unellipsis {
  -webkit-line-clamp: 0;
  opacity: 1;
}
.content-jian {
  float: right;
}

.appraise-img {
  margin: 40rpx 0 0;
}

js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    ellipsis: true,
  },
  ellipsis: function() {
    let value = !this.data.ellipsis;
    this.setData({
      ellipsis: value
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {

  }
})

最后给大家看一下效果图吧