x效果图：

wxml:

<view class="tabTit box">  <view class="flex1{{!tab[index]?' active':''}}" wx:for="{{tabTxt}}" wx:key="type" data-index="{{index}}" bindtap="filterTab">    <text>{{item}}</text>    <image src="/images/arrow.png"></image>  </view></view><!--筛选项--><view class="tabLayer" hidden="{{tab[0]}}">    <text class="{{pinpai_id==0?'active':''}}" data-id="0" data-index="0" data-txt="品牌" bindtap="filter">不限</text>    <text class="{{pinpai_id==item.id?'active':''}}" wx:for="{{pinpaiList}}" wx:key="pp" wx:for-item="item" data-id="{{item.id}}" data-index="0" data-txt="{{item.title}}" bindtap="filter">{{item.title}}</text></view><view class="tabLayer" hidden="{{tab[1]}}">    <text class="{{jiage_id==0?'active':''}}" data-id="0" data-index="1" data-txt="价格" bindtap="filter">不限</text>    <text class="{{jiage_id==1?'active':''}}" data-id="1" data-index="1" data-txt="58-88" bindtap="filter">58-88</text>    <text class="{{jiage_id==2?'active':''}}" data-id="2" data-index="1" data-txt="88-108" bindtap="filter">88-108</text>    <text class="{{jiage_id==3?'active':''}}" data-id="3" data-index="1" data-txt="108-188" bindtap="filter">108-188</text></view><view class="tabLayer" hidden="{{tab[2]}}">    <text class="{{xiaoliang_id==0?'active':''}}" data-id="0" data-index="2" data-txt="销量" bindtap="filter">不限</text>    <text class="{{xiaoliang_id==1?'active':''}}" data-id="1" data-index="2" data-txt="从高到低" bindtap="filter">从高到低</text>    <text class="{{xiaoliang_id==2?'active':''}}" data-id="2" data-index="2" data-txt="从低到高" bindtap="filter">从低到高</text></view> <!-- 下面列表 --><view class="container">  <view class='xiangqing' wx:for="{{details}}" bindtap="navigateTo">    <view class='xiangqing_img'>        <image src='{{item.img}}'></image>    </view>    <view class='xiangqing_info' >      <text class='zi' >自营</text><text class='title'>{{item.title}}</text>      <view class='key'>        <text wx:for="{{item.world}}" class='text{{index}}'>{{item.message}}</text>      </view>      <view class='house'>{{item.huxing}}|{{item.area}}m²|{{item.floor}}</view>      <view class='prix'>        <text class='prix1'>￥{{item.prix}}万</text><text>{{item.price}}元/m²</text><text></text>      </view>    </view>    <view class='yongjin'>      <view class='yongjin_info'>        <image src='/images/yong.png' class='yongjin_img'></image><text class='yongjin_font'>{{item.yongjin}}</text>      </view>    </view>  </view></view>

wxss:

.clear{  clear: both;  overflow: hidden;} .tabTit{  height:90rpx;  line-height: 90rpx;  border-bottom: solid 1px #eee;  position:fixed;  top:0;  width: 750rpx;  z-index: 1;  background: #fff;  font-size:15px;  text-align: center;} .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: 40rpx;  border-bottom: solid 1px #eee;  text-align: center;}.tabLayer text{  width:210rpx;  height:60rpx;  line-height:60rpx;  float:left;  border: solid 1px #eee;  margin:20rpx 0 0 26rpx;  font-size:15px;}.tabLayer .active{  color:#e64340;  border-color:#e64340;  } .flex1 {    flex: 1;    overflow: hidden;    display: block;} /*弹性盒模型*/.box {    display: -webkit-box;    display: -webkit-flex;    display: -ms-flexbox;    display: flex;} navigator{  display:inline;}.list{  margin-top:50px;} .list .list_item{  margin-top:10px;  padding:10px;  height:100px;  border-bottom:1px solid #E8E8E8;}.list .list_item .img{  float:left;  width:40%;  height:100%;}.list .list_item .img image{   width:100%;   height:100%;} .list .list_item .info{  width:59%;  float:right;  height:100px;  position:relative;}.list .list_item .info .title{  color:#333;  margin-left:10px;  font-size: 15px;} .list .list_item .info .price{  color:#FF2727;  margin-left:10px;  margin-top:10px;  font-size:15px;} .list .list_item .info .num{  position: absolute;  left:0px;  bottom:10px;  color:#747474;  margin-left:10px;  font-size:15px;}/* pages/list/list.wxss */.container{  padding: 0;  margin-top: 91rpx;}.xiangqing{  display: flex;  flex-wrap:wrap;  width: 100%;  border-top: 2rpx #dedede solid;  margin-top: 25rpx;  padding-top:10rpx; }.xiangqing_img{  width: 40%;  padding: 25rpx;}.xiangqing_img image{  width: 100%;  height: 220rpx;}.xiangqing_info{  width: 50%;  padding-top: 25rpx;  padding-bottom: 25rpx;}.xiangqing_info .zi{  border: 2rpx #FA8D33 solid;  color: #FA8D33;  padding:2rpx 10rpx;  font-size: 18rpx;  margin-right: 22rpx;  border-radius: 9rpx;}.xiangqing_info .title{  font-weight: 600;  line-height: 50rpx;  font-size: 28rpx;  color: #404040;}.key{  margin: 15rpx 0;}.key text{  margin-right: 15rpx; padding: 0 9rpx;  }.key .text0{background: #DDF7FF;color: #77B3E3;}.key .text1{background: #FFF0DF;color: #EDD590;}.key .text2{background: #BEE2D4;color: 71C7A5;}.key .text3{background: #DAF3FF;color: 97C2EA;}.house{margin-top: 25rpx;color: #A8A8A8}.prix{  margin-top:25rpx; }.prix .prix1{  color: #FA7C15;  font-size: 35rpx;  font-weight: 600;  margin-right: 25rpx;}.container{  display: block;}.yongjin{  width: 100%;  }.yongjin .yongjin_info{  background: #F6F6F6;  width: 90%;  margin-left: auto;  margin-right: auto;  padding-bottom: 15rpx;  padding-top: 17rpx;  padding-left: 17rpx;  overflow: hidden}.yongjin .yongjin_info .yongjin_img{  width: 45rpx;  height: 45rpx;  float: left;}.yongjin .yongjin_info .yongjin_font{  padding-left: 17rpx;  float: left;  color: #F56D03;  font-size: 32rpx;}

js:

// index/list.jsPage({  /**   * 页面的初始数据   */  data: {    tabTxt: ['品牌', '价格', '销量'],//分类    tab: [true, true, true],    pinpaiList: [{ 'id': '1', 'title': '品牌1' }, { 'id': '1', 'title': '品牌1' }],    pinpai_id: 0,//品牌    pinpai_txt: '',    jiage_id: 0,//价格    jiage_txt: '',    xiaoliang_id: 0,//销量    xiaoliang_txt: '',    details: [      {        img: '/images/house2.png',        prix: '73',        huxing: '3室2厅1卫',        area: '128',        price: '11456',        chanquan: '产权',        floor: '7/7',        title: '大连市西岗区锦园小区48号楼2单元707',        yongjin:'佣金1%，成交奖励奖励1万元',        world: [          {            message: 'foo',          },          {            message: 'bar'          }        ]      },      {        img: '/images/house2.png',        prix: '73',        huxing: '3室2厅1卫',        area: '128',        price: '11456',        chanquan: '产权',        floor: '7/7',        title: '大连市西岗区锦园小区48号楼2单元707',        yongjin: '佣金1%，成交奖励奖励1万元',        world: [          {            message: 'foo',          },          {            message: 'bar'          }        ]      },      {        img: '/images/house2.png',        prix: '73',        huxing: '3室2厅1卫',        area: '128',        price: '11456',        chanquan: '产权',        floor: '7/7',        title: '大连市西岗区锦园小区48号楼2单元707',        yongjin: '佣金1%，成交奖励奖励1万元',        world: [          {            message: 'foo',          },          {            message: 'bar'          }        ]      }    ],  },  // 选项卡  filterTab: function (e) {    var data = [true, true, true], index = e.currentTarget.dataset.index;    data[index] = !this.data.tab[index];    this.setData({      tab: data    })  },  //筛选项点击操作  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] = txt;        self.setData({          tab: [true, true, true],          tabTxt: tabTxt,          pinpai_id: id,          pinpai_txt: txt        });        break;      case '1':        tabTxt[1] = txt;        self.setData({          tab: [true, true, true],          tabTxt: tabTxt,          jiage_id: id,          jiage_txt: txt        });        break;      case '2':        tabTxt[2] = txt;        self.setData({          tab: [true, true, true],          tabTxt: tabTxt,          xiaoliang_id: id,          xiaoliang_txt: txt        });        break;    }    //数据筛选    self.getDataList();  },  //加载数据  getDataList: function () {    //调用数据接口，获取数据  }})