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

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

谷类及制品6 薯类、淀粉及制品6 干豆类及制品6 蔬菜类及制品6 菌藻类6 水果类及制品6 坚果、种子类6 畜肉类及制品6

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

效果