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

水深无声 2023-07-24 11:54 33阅读 0赞

我们先来看看

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;
    }

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() {
    
      }
    })

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70]: /images/20230528/ab558ffa7f0c4202a81e3a8847d15ea5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 1]: /images/20230528/d78835d198434096add7eea03393ff97.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNTQzMjY0_size_16_color_FFFFFF_t_70 2]: /images/20230528/2ee4916402d645ce8d1feeacaae650bb.png