微信小程序——收起和查看更多功能
阿新 • • 發佈:2018-08-01
http 技術分享 更多 .data 地方 分享圖片 lse als spl
項目中做一些列表的時候,可能會需要做到 查看更多 及 收起功能,如下圖所示:
大概的需求就是默認只顯示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~~
微信小程序——收起和查看更多功能