微信小程序實現收縮式菜單
本文實例為大傢分享瞭微信小程序實現收縮式菜單的具體代碼,供大傢參考,具體內容如下
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 }) }, })
效果
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。
推薦閱讀:
- 微信小程序實現簡單購物車功能
- 微信小程序實現商品分類列表
- 微信小程序實現文字長按復制與一鍵復制功能全過程
- 微信小程序下拉框組件使用方法
- 解決vue使用vant輪播組件swipe + flex時文字抖動問題