微信小程序實現收縮式菜單
更新時間：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獲取網頁寬高的方法，以及各個瀏覽器下不同方法獲取到的值的對比，有需要的小伙伴可以參考下。2015-07-07
這篇文章主要介紹了JavaScript實現表格快速變色效果的方法,通過javascript數組遍歷結合時間函數來實現表格快速變色的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JSON 是 JavaScript 原生格式，這意味著 在 JavaScript 中處理 JSON 數據不需要任何特殊的 API 或工具包,接下來由腳本之家小編給大家介紹在JavaScript中使用JSON數據的方法，感興趣的朋友一起學習吧2016-02-02
bcastr2.0 通用的圖片瀏覽器...2006-11-11
這篇文章主要介紹了JavaScript高級函數應用之分時函數,結合實例形式分析了javascript通過合理分時函數應用避免瀏覽器卡頓或假死的相關操作技巧,需要的朋友可以參考下2018-08-08
js es6系列教程 - 新的類語法實戰(zhàn)選項卡(詳解)
下面小編就為大家?guī)硪黄猨s es6系列教程 - 新的類語法實戰(zhàn)選項卡(詳解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
閉包是js的一個難點也是它的一個特色,是我們必須掌握的js高級特性,下面這篇文章主要給大家介紹了關于JavaScript閉包函數的相關資料,需要的朋友可以參考下2022-10-10
這篇文章主要介紹了關于layer.js使用心得-向彈出框傳值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
bootstrap paginator分頁插件的兩種使用方式實例詳解
Bootstrap Paginator是一款基于Bootstrap的js分頁插件，下面通過本文給大家介紹bootstrap paginator分頁插件的兩種使用方式，一起看看吧2017-11-11
這篇文章主要介紹了JavaScript實現常用二級省市級聯下拉列表的方法,實例分析了javascript實現級聯下拉列表的技巧與相關的元素操作方法,需要的朋友可以參考下2015-03-03