大概的需求就是默認只顯示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; }

狀態效果如下：

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的微信小程序——收起和查看更多功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。