微信小程序如何實現收縮式菜單

這篇“微信小程序如何實現收縮式菜單”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“微信小程序如何實現收縮式菜單”文章吧。

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

})

效果

以上就是關于“微信小程序如何實現收縮式菜單”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。