小程序展开二级菜单

柔光的暖阳◎ 2022-05-09 23:16 220阅读 0赞

效果图:

![70][]

直接上代码:

WXML:
    
    <view class='dataCent'>
      <view class='MenuDiv' wx:for="{
       {arrayMenu}}" data-index="{
       {index}}" bindtap='clickMenu'>
        <view class='leftimg'>
          <image src="https://jiqiren.icehot.cc/wxtest/img2.png"></image>
        </view>
        <view  class='rightimg'>
          <view  class='rightimg-top'>
            {
       {item.topcent}}
          </view>
          <view  class='rightimg-bot'>
          {
       {item.botcent}}
          </view>
          <view class='bottomImages' hidden='{
       {item.hideHidden}}'>
            <view wx:for="{
       {item.menu}}">{
       {item.cent}}</view>
          </view>
        </view>
      </view>
    </view>
    
    WXSS:
    
    .dataCent{width: 200px;margin: 0 auto;}
    .MenuDiv{overflow: hidden;}
    .MenuDiv:first-child{border-bottom: 1px solid #ccc;}
    .MenuDiv>view{float: left;}
    .rightimg{width: calc(100% - 10px);text-align: center;}
    .leftimg>image{width: 10px;height: 10px;}
    .rightimg-top{font-size: 40rpx;}
    .rightimg-bot{font-size: 20rpx;}
    .bottomImages>view{
      font-size: 30rpx;padding-left: 15rpx;box-sizing: border-box;
      line-height: 2;
      border-top: 1px solid #ededed;
    }
    
    js:
    
    // pages/menu/menu.js
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        arrayMenu: [{
          topcent: '菜单一',
          botcent: 'caidanyi',
          menu: [
            {
              cent: '菜单1-1'
            },
            {
              cent: '菜单1-2'
            },
            {
              cent: '菜单1-3'
            }
          ],
          hideHidden: true
        },
        {
          topcent: '菜单二',
          botcent: 'caidaner',
          menu: [
            {
              cent: '菜单2-1'
            },
            {
              cent: '菜单2-2'
            },
            {
              cent: '菜单2-3'
            }
          ],
          hideHidden: true
        }
        ]
      },
      clickMenu: function (e) {
        var that = this;
        console.log("打印索引值", e.currentTarget.dataset.index);
        // 获取索引值
        var index = e.currentTarget.dataset.index;
        // 获取当前的状态，是否隐藏的值
        var staues = that.data.arrayMenu[index].hideHidden;
        console.log("111", staues);
        // 第几个状态
        var stauesval = "arrayMenu[" + index + "].hideHidden";
        if (staues == true) {
          that.setData({
            [stauesval]: false
          })
        } else {
          that.setData({
            [stauesval]: true
          })
        }
      },
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function (options) {
    
      },
    
      /**
       * 生命周期函数--监听页面初次渲染完成
       */
      onReady: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面显示
       */
      onShow: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面隐藏
       */
      onHide: function () {
    
      },
    
      /**
       * 生命周期函数--监听页面卸载
       */
      onUnload: function () {
    
      },
    
      /**
       * 页面相关事件处理函数--监听用户下拉动作
       */
      onPullDownRefresh: function () {
    
      },
    
      /**
       * 页面上拉触底事件的处理函数
       */
      onReachBottom: function () {
    
      },
    
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

大佬们，敲代码很累的，觉得有用点个赞呗。对，就是右上角那个大拇指，按一下就行。

**如果有帮到你的话，欢迎激励一下作者。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

[70]: /images/20220510/782fc27a25f94e848fe442a1fd552f41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: /images/20220510/9f0ea81f82094917a22e746e9d8021a0.png