微信小程序如何实现收缩式菜单

这篇“微信小程序如何实现收缩式菜单”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“微信小程序如何实现收缩式菜单”文章吧。

wxml文件

<view class="page"><!--分类 --><view class="li" data-index="0" bindtap='changeToggle'><view class="left">谷类及制品</view><view class="right">6 <text class="iconfont {{selectedFlag[0]?'icon-shangjiantou':'icon-xiala'}}"> </text>      </view>  </view>  <view hidden="{{!selectedFlag[0]}}">    <view wx:for="{{list01}}" wx:for-item="item" wx:for-index="index">      <view class="li bg-gray">        <view>{{item}}</view>      </view>    </view>  </view>  <view class="li" data-index="1" bindtap='changeToggle'>    <view class="left">薯类、淀粉及制品</view>    <view class="right">6      <text class="iconfont {{selectedFlag[1]?'icon-shangjiantou':'icon-xiala'}}"> </text>    </view>  </view>  <view hidden="{{!selectedFlag[1]}}">    <block wx:for="{{list02}}" wx:for-item="item" wx:for-index="index">      <view class="li bg-gray">        <view>{{item}}</view>      </view>    </block>  </view>  <view class="li" data-index="2" bindtap='changeToggle'>    <view class="left">干豆类及制品</view>    <view class="right red">6      <text class="iconfont {{selectedFlag[2]?'icon-shangjiantou':'icon-xiala'}}"> </text>    </view>  </view>  <view hidden="{{!selectedFlag[2]}}">    <block wx:for="{{list03}}" wx:for-item="item" wx:for-index="index">      <view class="li bg-gray">        <view>{{item}}</view>      </view>    </block>  </view>  <view class="li" data-index="3" bindtap='changeToggle'>    <view class="left">蔬菜类及制品</view>    <view class="right red">6      <text class="iconfont {{selectedFlag[3]?'icon-shangjiantou':'icon-xiala'}}"> </text>    </view>  </view> <view hidden="{{!selectedFlag[3]}}">    <block wx:for="{{list04}}" wx:for-item="item" wx:for-index="index">      <view class="li bg-gray">        <view>{{item}}</view>      </view>    </block>  </view><view class="li" data-index="4" bindtap='changeToggle'>    <view class="left">菌藻类</view>    <view class="right red">6      <text class="iconfont {{selectedFlag[4]?'icon-shangjiantou':'icon-xiala'}}"> </text>    </view>  </view> <view hidden="{{!selectedFlag[4]}}">    <block wx:for="{{list05}}" wx:for-item="item" wx:for-index="index">      <view class="li bg-gray">        <view>{{item}}</view>      </view>    </block>  </view><view class="li" data-index="5" bindtap='changeToggle'>    <view class="left">水果类及制品</view>    <view class="right red">6      <text class="iconfont {{selectedFlag[5]?'icon-shangjiantou':'icon-xiala'}}"> </text>    </view>  </view> <view hidden="{{!selectedFlag[5]}}">    <block wx:for="{{list06}}" wx:for-item="item" wx:for-index="index">      <view class="li bg-gray">        <view>{{item}}</view>      </view>    </block>  </view><view class="li" data-index="6" bindtap='changeToggle'>    <view class="left">坚果、种子类</view>    <view class="right red">6      <text class="iconfont {{selectedFlag[6]?'icon-shangjiantou':'icon-xiala'}}"> </text>    </view>  </view> <view hidden="{{!selectedFlag[6]}}">    <block wx:for="{{list07}}" wx:for-item="item" wx:for-index="index">      <view class="li bg-gray">        <view>{{item}}</view>      </view>    </block>  </view><view class="li" data-index="7" bindtap='changeToggle'>    <view class="left">畜肉类及制品</view>    <view class="right red">6      <text class="iconfont {{selectedFlag[7]?'icon-shangjiantou':'icon-xiala'}}"> </text>    </view>  </view> <view hidden="{{!selectedFlag[7]}}">    <block wx:for="{{list08}}" wx:for-item="item" wx:for-index="index">      <view class="li bg-gray">        <view>{{item}}</view>      </view>    </block>  </view></view>

wxss文件

.li {  background-color: #fff;  display: flex;  justify-content: space-between;  font-size: 34rpx;  width: 92%;  padding: 0 4%;  height: 100rpx;  line-height: 100rpx;  border-bottom: 1rpx solid #f1f1f1;}.bg-gray{    background-color: #ccc!important;    border-bottom: 1rpx solid  #fff!important;}  .icon-xiala ,.icon-shangjiantou {  color: #999;  font-size: 58rpx;}

js文件

Page({  data: {    list01: [       "面条","花卷","馒头","油条","米饭","小米" ,    ],    list02: [      "甘薯","红薯","粉丝","土豆","魔芋豆腐","小黑药粉" ,    ],    list03: [      "豆腐卷","豆腐干","素大肠","绿豆","素鸡","脑豆"     ],    list04: [      "胡萝卜","白萝卜","豌豆尖","绿豆芽","白菜","蒜苔"     ],    list05: [      "海带","香菇","蘑菇","紫菜","金针菇","木耳"     ],    list06: [      "西瓜","木瓜","梨","苹果","橘子","香蕉"     ],    list07: [      "花生","芝麻","杏仁","榛子","腰果","桃仁"     ],    list08: [      "猪肉","猪蹄","腊肉","牛肉","羊肉","马肉"     ],  // 展开折叠    selectedFlag: [false, false, false, false,false, false, false, false],  },    // 展开折叠选择    changeToggle:function(e){    var index = e.currentTarget.dataset.index;    if (this.data.selectedFlag[index]){      this.data.selectedFlag[index] = false;    }else{      this.data.selectedFlag[index] = true;    }    this.setData({      selectedFlag: this.data.selectedFlag    })  },})

效果

以上就是关于“微信小程序如何实现收缩式菜单”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。