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

本文实例为大家分享了微信小程序实现收缩式菜单的具体代码，供大家参考，具体内容如下

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
? ? })
? },

})

效果

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现收缩式菜单的详细内容...