云豹直播小程序源码，实现直播商城菜单选择功能

近日，云豹直播系统更新了直播小程序源码中关于商城或类似项目中经常会用到多级菜单选择的功能，小程序自带的滚动选择器picker可以实现等级选择功能，但是该效果是从底部弹起的滚动选择器，这个是小程序内置组件，相关弹框的样式及内容格式我们没办法进行修改，如果想实现类似各大商城的菜单效果，这里需要我们自行完成，以下代码来自云豹直播小程序源码，简单实现了菜单选择功能。

一、直播小程序源码中的组件wxml界面代码

1、以下代码是wxml，显示界面代码，三级菜单分别显示的位置设置

<view class="container">
  <!-- 左侧  -->
  <scroll-view class='nav_left' scroll-y='true'>
  <!-- 一级 -->
    <block wx:for="{{cateItems}}" wx:key="{{index}}">
      <view class="nav_left_items {{curNav==item.cate_id?'active':''}}" bindtap="switchRightTab" data-index='{{index}}' data-id="{{item.cate_id}}">{{item.cate_name}}</view>
    </block>
  </scroll-view>
  <!-- 右侧 -->
  <scroll-view class="nav_right" scroll-y="true">
  <!-- 二级 -->
      <block wx:for="{{cateItems[curIndex].children}}" wx:key="{{index}}">
     <text class="twoclass">{{item.name}}</text>
    <!--三级-->
    <view class="{{topx}}">
      <block wx:for="{{item.son}}" wx:key="{{item.child_id}}">
        <view class="nav_right_items" data-id="{{item.son_id}}" data-name="{{item.name}}">
            <text bindtap="chooseshopclass" data-id="{{item.son_id}}" data-name="{{item.name}}" >{{item.name}}</text>
        </view>
      </block>
    </view>
   </block>
  </scroll-view>
</view>

以上直播小程序源码编辑出的效果图如下：左侧为一级菜单，右侧为二、三级菜单，二级菜单下显示三级菜单内容，此处可点击三级菜单完成菜单选择功能

2、通常，这种菜单选择的功能大部分会从父界面点击跳转到子界面，选择红再返回到父界面，所以一般会在父界面定义好菜单的名称及ID，便于在子界面赋值。以下代码为例我这里定义了shopid与shopclassname，这两个字段名称在下文中介绍使用方式

<view class="whole column_view"  bindtap="chooseShopclass" data-id="{{shopid}}">{{shopclassname}}</view>

二、组件数据初始化获取代码获取文件js

1、初始化数据如下：初始化界面时这些数据会传递到界面显示，数组格式参照cateItems

 data: {
      //一级
     cateItems:[
      {
        cate_id:1,//一级菜单ID
        cate_name:'手机/数码/电脑办公',//一级菜单名称
        //二级
        children: [
          { 
            child_id: 1, //二级菜单ID
            name: '电脑办公',//二级菜单名称
            //三级
            son:[
              {
                son_id:1,//三级菜单ID
                name:'华硕',//三级菜单名称
              },
              {
                son_id:2,
                name:'戴尔',
              },
              {
                son_id:9,
                name:'惠普',
              }
            ]
          }, 
          { 
            child_id: 2, 
            name: '手机', 
            son:[
            ]
          }
        ]
      } },

2、点击左侧的一级菜单，右侧的二级菜单内容会同步改变

  switchRightTab:function(e){
      let id = e.target.dataset.id,index=e.target.dataset.index;
      this.setData({
       curNav:id,
        curIndex:index,   
       })
  },

直播小程序源码做出的效果图如下：

3、点击右侧的三级菜单名称，同时关闭当前界面，返回父界面并将选中的数据值带回到父界面。其中shopid、shopclassname就是上文中提到的在父界面定义的名称。在此处给这两个参数完成赋值。

代码如下：

//选择商品类别
  chooseshopclass(e){
    let id = e.target.dataset.id,name=e.target.dataset.name;
    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 2];  //上一个页面
    prevPage.setData({
      shopid: id,//商品ID
      shopclassname: name,//商品名称
    })
    wx.navigateBack({//关闭当前界面，返回父界面
      delta:1
    })
    
  },

三、下拉框样式wxss文件部分代码如下：

可根据项目需要自行调整

/**菜单**/
.container{
  position:fixed;
  width:100%;
  height:100%;
  background-color:#FFF;
  border-top: 1px solid #eee;
}
.nav_left{
  width:38%;
  height:100%;
  background:#F0F0F0;
  text-align:center;
  position:absolute;
  top:0;
  left:0;
}
.nav_left .nav_left_items{
  height:130rpx;
  font-size:28rpx;
  text-align: left;
  padding: 0 20rpx;
  align-items: center;
  display: flex;
}

以上就是云豹直播小程序源码中关于商城三级菜单的简单设置，大家可以参考下。

声明：以上内容为云豹科技作者本人原创，未经作者本人同意，禁止转载，否则将追究相关法律责任www.yunbaokj.com