脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → 微信小程序收缩式菜单

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

 更新时间：2022年07月17日 10:23:36   作者：齐燕博  
这篇文章主要为大家详细介绍了微信小程序实现收缩式菜单，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

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

})

效果

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

您可能感兴趣的文章:

相关文章

  • javascript获取网页宽高方法汇总

    javascript获取网页宽高方法汇总

    本文给大家汇总介绍了下javascript获取网页宽高的方法，以及各个浏览器下不同方法获取到的值的对比，有需要的小伙伴可以参考下。
    2015-07-07
  • JavaScript实现表格快速变色效果代码

    JavaScript实现表格快速变色效果代码

    这篇文章主要介绍了JavaScript实现表格快速变色效果的方法,通过javascript数组遍历结合时间函数来实现表格快速变色的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-08-08
  • 在JavaScript中使用JSON数据

    在JavaScript中使用JSON数据

    JSON 是 JavaScript 原生格式，这意味着 在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包,接下来由脚本之家小编给大家介绍在JavaScript中使用JSON数据的方法，感兴趣的朋友一起学习吧
    2016-02-02
  • bcastr2.0 通用的图片浏览器

    bcastr2.0 通用的图片浏览器

    bcastr2.0 通用的图片浏览器...
    2006-11-11
  • JavaScript高级函数应用之分时函数实例分析

    JavaScript高级函数应用之分时函数实例分析

    这篇文章主要介绍了JavaScript高级函数应用之分时函数,结合实例形式分析了javascript通过合理分时函数应用避免浏览器卡顿或假死的相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • js es6系列教程 - 新的类语法实战选项卡(详解)

    js es6系列教程 - 新的类语法实战选项卡(详解)

    下面小编就为大家带来一篇js es6系列教程 - 新的类语法实战选项卡(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • JavaScript闭包原理与使用介绍

    JavaScript闭包原理与使用介绍

    闭包是js的一个难点也是它的一个特色,是我们必须掌握的js高级特性,下面这篇文章主要给大家介绍了关于JavaScript闭包函数的相关资料,需要的朋友可以参考下
    2022-10-10
  • 关于layer.js使用心得-向弹出框传值问题

    关于layer.js使用心得-向弹出框传值问题

    这篇文章主要介绍了关于layer.js使用心得-向弹出框传值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-11-11
  • bootstrap paginator分页插件的两种使用方式实例详解

    bootstrap paginator分页插件的两种使用方式实例详解

    Bootstrap Paginator是一款基于Bootstrap的js分页插件，下面通过本文给大家介绍bootstrap paginator分页插件的两种使用方式，一起看看吧
    2017-11-11
  • JavaScript实现常用二级省市级联下拉列表的方法

    JavaScript实现常用二级省市级联下拉列表的方法

    这篇文章主要介绍了JavaScript实现常用二级省市级联下拉列表的方法,实例分析了javascript实现级联下拉列表的技巧与相关的元素操作方法,需要的朋友可以参考下
    2015-03-03

最新评论