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

逃离我推掉我的手 2023-02-28 08:54 36阅读 0赞

项目中做一些列表的时候，可能会需要做到 查看更多 及 收起功能，如下图所示：

![aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzM1ODAzLzIwMTgwOC83MzU4MDMtMjAxODA4MDExMTI2NTU2NDEtODg5OTgyNDUwLmdpZg][]

大概的需求就是默认只显示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:

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

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

![复制代码][aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]

最后看一下解析结果（请注意看下我标注红色箭头的地方，再结合wxss品味一下）：

默认的状态：

![format_png][]

全部显示的状态：

![format_png 1][]

[aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzM1ODAzLzIwMTgwOC83MzU4MDMtMjAxODA4MDExMTI2NTU2NDEtODg5OTgyNDUwLmdpZg]: /images/20230209/d044cc67cc764c4a8b99515fd4b86c1e.png
[aHR0cHM6Ly9jb21tb24uY25ibG9ncy5jb20vaW1hZ2VzL2NvcHljb2RlLmdpZg]: /images/20230209/6454ac27d5a44eac8b024feebe78fc53.png
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzM1ODAzLzIwMTgwOC83MzU4MDMtMjAxODA4MDExMTM4MzAxOTYtMTM4MzM1MjkyOS5wbmc?x-oss-process=image/format,png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9pbWFnZXMyMDE4LmNuYmxvZ3MuY29tL2Jsb2cvNzM1ODAzLzIwMTgwOC83MzU4MDMtMjAxODA4MDExMTM5MTU4MTEtMjA4MTU2Njg2MS5wbmc?x-oss-process=image/format,png