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

.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}}/textimage 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/viewview 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/viewview 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/viewview 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();  },