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

发布时间:2022-08-19 12:55

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

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

})

效果

微信小程序实现收缩式菜单_第1张图片

微信小程序实现收缩式菜单_第2张图片

微信小程序实现收缩式菜单_第3张图片

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

ItVuer - 免责声明 - 关于我们 - 联系我们

本网站信息来源于互联网,如有侵权请联系:561261067@qq.com

桂ICP备16001015号