微信小程序实现收缩式菜单
更新时间:2022年7月17日 15:15 点击:999 作者:齐燕博
本文实例为大家分享了微信小程序实现收缩式菜单的具体代码,供大家参考,具体内容如下
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 }) }, })
效果
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持猪先飞。
原文出处:https://blog.csdn.net/lovekobe1997/article/details/116746625
上一篇: 微信小程序实现左侧导航栏
下一篇: 微信小程序实现字母索引菜单
相关文章
- 本文实例讲述了jQuery实现非常实用漂亮的select下拉菜单选择效果。分享给大家供大家参考,具体如下:先来看如下运行效果截图:在线演示地址如下:http://demo.jb51.net/js/2015/js-select-chose-style-menu-codes/具体代码如...2015-11-08
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 本文实例讲述了JS实现的简洁纵向滑动菜单(滑动门)效果。分享给大家供大家参考,具体如下:这是一款纵向布局的CSS+JavaScript滑动门代码,相当简洁的手法来实现,如果对颜色不满意,你可以试着自己修改CSS代码,这个滑动门将每一...2015-10-21
- 本文实例讲述了JS基于Mootools实现的个性菜单效果代码。分享给大家供大家参考,具体如下:这里演示基于Mootools做的带动画的垂直型菜单,是一个初学者写的,用来学习Mootools的使用有帮助,下载时请注意要将外部引用的mootools...2015-10-23
- 本文实例讲述了jQuery实现有动画淡出效果的二级折叠菜单代码。分享给大家供大家参考,具体如下:这里介绍jQuery实现有动画淡出效果的二级折叠菜单代码,相当不错,因考虑功能的实现,所以没有怎么美化,不过这样也好,可以给大家更...2015-10-21
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 本文实例讲述了jQuery实现可关闭固定于底(顶)部的工具条菜单效果。分享给大家供大家参考,具体如下:这是一款可关闭始终在页面底部的工具条菜单,浮动在页面顶部的大家见的比较多了,本款从形式上来说与其它的没什么差别,只是浮...2015-11-08
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 这篇文章主要为大家详细介绍了jQuery实现下拉菜单滑动效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-09
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 二级联动下拉菜单选择应用在在很多地方,比如说省市下拉联动,商品大小类下拉选择联动。本文将通过实例讲解使用jQuery+PHP+MySQL来实现大小分类二级下拉联动效果。 实现效果:当选择大类时,小类下拉框里的选项内容也随着改...2015-10-30
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
- 这是一款精美的多级下拉菜单美化,可以完美替代“select”来实现下拉菜单的效果。而且支持多级菜单,有加载等待效果,有层级分类展示。复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "ht...2015-03-15
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16
- 由于业务需要,要求实现树形菜单,且菜单数据由后台返回,下面这篇文章主要给大家介绍了关于js如何构造elementUI树状菜单的数据结构的相关资料,需要的朋友可以参考下...2021-05-13
- 这篇文章主要为大家详细介绍了jquery插件实现悬浮的菜单,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-04-23