微信小程序——收起和查看更多功能

項目中做一些列表的時候，可能會需要做到 查看更多 及 收起功能，如下圖所示：

 

大概的需求就是默認只顯示2條，點擊【查看更多】顯示全部，點擊【收起】還原。

實現的方法千萬種。我來講一下我的實現思路：

1.先判斷列表的長度，如果小於3就不要【查看更多】這個按鈕了。

2.根據索引的大小來判斷它是默認顯示還是隱藏。如果索引小於2就顯示，大於2就隱藏。至於顯示隱藏，我用的是class控制的。

3.再給【查看更多】和【收起】綁定點擊事件。

 

代碼如下：

wxml:

<view class="weui-cells mgt-0 {{!showMore? 'hiddenmore' : 'showmore'}}">
      <view wx:for="{{rankList}}" wx:for-item="item" wx:for-index="idx" wx:key="" class="weui-cell {{idx>1 ? 'more-item' : ''}}">
        <view class="weui-cell__bd ml-10">
          <text class='fs-30 block'>nickname{{idx}}</text>
        </view>
        <view class="weui-cell__ft fc-66 fs-28">
          砍了
          <text class='fc-red'>￥{{item.amount}}</text>
        </view>
      </view>
    </view>
    <block wx:if="{{rankList.length>2}}">
      <view wx:if="{{showMore}}" class='fs-30 text-center pd10-15 fc-blue' bindtap='listToggle'>
        收起
        <icon class="shishuofont icon-list-close"></icon>
      </view>
      <view wx:else class='fs-30 text-center pd10-15 fc-blue' bindtap='listToggle'>
        查看更多
        <icon class="shishuofont icon-list-open"></icon>
      </view>
    </block> 

 

js:

主要的data數據：

data: {
    showMore: false,
    rankList:[],//這里面的數據是通過請求獲取的    
  },

主要的方法：

listToggle: function () {
    this.setData({
      showMore: !this.data.showMore
    })
  },

 

wxss:

.hiddenmore .more-item {
  display: none;
}

.showmore .more-item {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}

 

最后看一下解析結果（請注意看下我標注紅色箭頭的地方，再結合wxss品味一下）：

默認的狀態：

 

全部顯示的狀態：

 

 路過的大神，如有更好的解決方案，可以多share share~~