您现在的位置是：网站首页> 编程资料编程资料
微信小程序实现收缩式菜单_javascript技巧_
2023-05-24
345人已围观
简介 微信小程序实现收缩式菜单_javascript技巧_
本文实例为大家分享了微信小程序实现收缩式菜单的具体代码，供大家参考，具体内容如下
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 }) }, })效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
您可能感兴趣的文章:
