微信小程序--上方菜单栏导航栏，点击加载二级菜单的代码分享，侧边菜单同样的道理

下面只提供需要的代码，关键代码，技术代码。其他的自行结合使用。

.wxml代码部分：

<!--选项卡-->
<view class="tabTit box tc bg_f">
    <view class="flex1{{!tab[index]?' active':''}}" wx:for="{{tabTxt}}" wx:key="" data-index="{{index}}" data-id="{{item.id}}" bindtap="filterTab"><text>{{item.name}}</text><image src="/images/arrow.png"></image></view>
</view>
<!--筛选项-->
<view class="tabLayer tc" hidden="{{tab[0]}}">
    <text class="{{cat_id==0?'active':''}}" data-id="0" data-index="0" data-txt="导航" bindtap="filter">不限</text>
    <text class="{{cat_id==item.id?'active':''}}" wx:for="{{filterList}}" wx:key="" data-id="{{item.id}}" data-index="0" data-txt="{{item.name}}" bindtap="filter">{{item.name}}</text>
</view>

<view class="tabLayer tc" hidden="{{tab[1]}}">
    <text class="{{cat_id==0?'active':''}}" data-id="0" data-index="1" data-txt="导航" bindtap="filter">不限</text>
    <text class="{{cat_id==item.id?'active':''}}" wx:for="{{filterList}}" wx:key="" data-id="{{item.id}}" data-index="1" data-txt="{{item.name}}" bindtap="filter">{{item.name}}</text>
</view>
<view class="tabLayer tc" hidden="{{tab[2]}}">
    <text class="{{cat_id==0?'active':''}}" data-id="0" data-index="2" data-txt="导航" bindtap="filter">不限</text>
    <text class="{{cat_id==item.id?'active':''}}" wx:for="{{filterList}}" wx:key="" data-id="{{item.id}}" data-index="2" data-txt="{{item.name}}" bindtap="filter">{{item.name}}</text>
</view>
<view class="tabLayer tc" hidden="{{tab[3]}}">
    <text class="{{cat_id==0?'active':''}}" data-id="0" data-index="3" data-txt="导航" bindtap="filter">不限</text>
    <text class="{{cat_id==item.id?'active':''}}" wx:for="{{filterList}}" wx:key="" data-id="{{item.id}}" data-index="3" data-txt="{{item.name}}" bindtap="filter">{{item.name}}</text>
</view>.

.wxss样式代码：

page{padding:90rpx 0 50px;}
.tabTit{height:90rpx;line-height: 90rpx;border-bottom: solid 1px #eee;position:fixed;top:0;width: 750rpx;z-index: 1;background: #f5f5f5;}
.tabTit .active{color:#e64340;background: #fff;}
.tabTit .active image{transform: rotate(180deg);background: none;}
.tabTit image{width:26rpx;height:26rpx;vertical-align: middle;margin-left: 5px;}
.tabLayer{box-shadow: 0 5px 5px rgba(0,0,0,.15);width:750rpx;overflow: hidden;position: fixed;top:90rpx;z-index: 1;background: #fff;padding-bottom: 26rpx;border-bottom: solid 1px #eee;}
.tabLayer text{width:210rpx;height:60rpx;line-height:60rpx;float:left;border: solid 1px #eee;margin:20rpx 0 0 26rpx;}
.tabLayer .active{color:#e64340;border-color:#e64340;}
.case{height:640rpx;margin:30rpx auto 0;background: #fff;border:solid 1px #f1f1f1;overflow:hidden;}
.case .title{font-size: 33rpx;color:#000;margin-top: 5rpx;}
.case .title,.case .tag{padding:0 5rem 0 15px;}
.case .tag{font-size:28rpx;}
.case .pic{width:100%;height:510rpx;}
.case .headPic{right:10px;top:455rpx;}
.case .headPic image{width:100rpx;height:100rpx;border-radius: 50%;border:solid 6rpx #fff;}
.case .headPic text{display: block;font-size:28rpx;margin-top: -6rpx;}

.js代码：

data: {
    datas: [],
    pro:[],
    data: [],//数据
    // qixing: 0,//户型
    // ticai: 0,//风格
    // house_area: 0,//面积
    cat_id:0,
    id:0,
    index:0,
    "tabTxt": [
      { id: "2", tid: "1", name: "器型" },
      { id: "3", tid: "1", name: "题材" },
      { id: "4", tid: "1", name: "材质" },
      { id: "12", tid: "1", name: "玉种" }
    ],//tab文案'户型', '风格', '面积'
    tab: [true, true, true, true],
    disabled: false,//加载更多按钮状态
    page: 1,//当前页码
    hasMore: false,//加载更多按钮
    moreTxt: '点击加载更多',
    dataNull: true
  },
  // 选项卡
  filterTab: function (e) {
    var that =this;
    var data = [true, true, true, true], index = e.currentTarget.dataset.index;
    data[index] = !this.data.tab[index];//通过对应下标的真或假，判断是否打开或关闭
    var id = e.currentTarget.dataset.id;//对应分类的id，便于获取子分类
    this.setData({
      tab: data
    });
    //当展开菜单时，请求数据false，关闭时，不请求数据
    if(!data[index]){

      wx.request({
        url: app.d.ceshiUrl + '/Api/Category/getcat',
        method: 'post',
        data: { cat_id: id },//获取子分类
        header: {
          'Content-Type': 'application/x-www-form-urlencoded'
        },
        success: function (res) {
          var status = res.data.status;
          if (status == 1) {
            var catList = res.data.catList;
            console.log(catList);
            that.setData({
              filterList: catList,
            });
          } else {
            wx.showToast({
              title: res.data.err,
              duration: 2000,
            });
          }
        },
        error: function (e) {
          wx.showToast({
            title: '网络异常！',
            duration: 2000,
          });
        }
      });
    }
    
  },
  // 获取筛选项，获取主导航栏分类
  getFilter: function () {
    var that = this;
    wx.request({
      url: app.d.ceshiUrl + '/Api/Category/index',
      method: 'post',
      data: {},
      header: {
        'Content-Type': 'application/x-www-form-urlencoded'
      },
      success: function (res) {
        //--init data 
        var status = res.data.status;
        if (status == 1) {
          var list = res.data.list;
          //var catList = res.data.catList;
          that.setData({
            tabTxt: list,
            //typeTree: catList,
          });
        } else {
          wx.showToast({
            title: res.data.err,
            duration: 2000,
          });
        }
        //获取全部数据
        

      },
      error: function (e) {
        wx.showToast({
          title: '网络异常！',
          duration: 2000,
        });
      },

    });
  },
  //筛选项点击操作
  filter: function (e) {
    var self = this, id = e.currentTarget.dataset.id, txt = e.currentTarget.dataset.txt, tabTxt = this.data.tabTxt;
    switch (e.currentTarget.dataset.index) {
      case '0':
        tabTxt[0] = {
          id: "2",
          tid: "1",
          name:txt
        };
        self.setData({
          page: 1,
          data: [],
          tab: [true, true, true,true],
          tabTxt: tabTxt,
          cat_id: id
        });
        break;
      case '1':
        tabTxt[1] = {
          id: "3",
          tid: "1",
          name: txt
        };
        self.setData({
          page: 1,
          data: [],
          tab: [true, true, true, true],
          tabTxt: tabTxt,
          cat_id: id
        });
        break;
      case '2':
        tabTxt[2] = {
          id: "4",
          tid: "1",
          name: txt
        };
        self.setData({
          page: 1,
          data: [],
          tab: [true, true, true, true],
          tabTxt: tabTxt,
          cat_id: id
        });
        break;
      case '3':
        tabTxt[3] = {
          id: "12",
          tid: "1",
          name: txt
        };
        self.setData({
          page: 1,
          data: [],
          tab: [true, true, true, true],
          tabTxt: tabTxt,
          cat_id: id
        });
        break;
    }
    //数据筛选
    self.getData();
  },

  //加载数据
  getData: function (callback) {
    var self = this;
    wx.showToast({
      title: '加载中...',
      icon: 'loading',
      duration: 10000
    });
    wx.request({
      url: app.d.ceshiUrl + '/Api/Product/lists',
      method: 'post',
      data: {
        cat_id: self.data.cat_id,
        page:self.data.page,
        // ptype: ptype,
        // brand_id: brandId
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded'
      },
      // header: {
      //   'Content-Type': 'application/json' ///为什么这个不行
      // },
      success: function (res) {
        self.dataFormat(res);//数据处理
      },
      fail: function () {
        console.log('error!!!!!!!!!!!!!!')
      }
    })
  },
  //数据处理
  dataFormat: function (d) {
    if (d.data.status == "1") {
      if (d.data.pro) {
        var datas = this.data.data.concat(d.data.pro), flag = d.data.pro.length < 4;//如果小于4,肯定加载完了，否则不确定
        this.setData({
          data: datas,
          disabled: flag ? true : false,
          moreTxt: flag ? "已加载全部数据" : "点击加载更多",
          hasMore: true,
          dataNull: true
        });

      } else {
        this.setData({
          hasMore: false,
          dataNull: false
        });
      }
    } else {
      console.log('接口异常！')
    }
    wx.hideToast();
  },

代码使用的话，直接测试下。使用部分代码需要自己研究下。有问题给我留言