本文实例为大家分享了微信小程序实现收缩式菜单的具体代码，供大家参考，具体内容如下
wxml文件
谷类及制品 6 {{item}} 薯类、淀粉及制品 6 {{item}} 干豆类及制品 6 {{item}} 蔬菜类及制品 6 {{item}} 菌藻类 6 {{item}} 水果类及制品 6 {{item}} 坚果、种子类 6 {{item}} 畜肉类及制品 6 {{item}}
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
})
},
})
效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。