<view class=‘viewdown‘> <!-- 排序 --> <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/jiantou.png"></image> </view> </view> <!--筛选项--> <!-- 地区 --> <view class="tabLayer" hidden="{{tab[0]}}"> <text class="{{diqu_id==0?‘active‘:‘‘}}" data-id="0" data-index="0" data-txt="不限" bindtap="filter">不限</text> <text class="{{diqu_id==1?‘active‘:‘‘}}" data-id="1" data-index="0" data-txt="金水区" bindtap="filter">金水区</text> <text class="{{diqu_id==2?‘active‘:‘‘}}" data-id="2" data-index="0" data-txt="中原区" bindtap="filter">中原区</text> <text class="{{diqu_id==3?‘active‘:‘‘}}" data-id="3" data-index="0" data-txt="二七区" bindtap="filter">二七区</text> <text class="{{diqu_id==4?‘active‘:‘‘}}" data-id="4" data-index="0" data-txt="上街区" bindtap="filter">上街区</text> <text class="{{diqu_id==5?‘active‘:‘‘}}" data-id="5" data-index="0" data-txt="管城回族区" bindtap="filter">管城回族区</text> <text class="{{diqu_id==6?‘active‘:‘‘}}" data-id="6" data-index="0" data-txt="惠济区" bindtap="filter">惠济区</text> </view> <!-- 星级 --> <view class="tabLayer" hidden="{{tab[1]}}"> <text class="{{xingji_id==0?‘active‘:‘‘}}" data-id="1" data-index="1" data-txt="星级" bindtap="filter">不限</text> <text class="{{xingji_id==1?‘active‘:‘‘}}" data-id="2" data-index="1" data-txt="1-2" bindtap="filter">1-2</text> <text class="{{xingji_id==2?‘active‘:‘‘}}" data-id="3" data-index="1" data-txt="2-3" bindtap="filter">2-3</text> <text class="{{xingji_id==3?‘active‘:‘‘}}" data-id="4" data-index="1" data-txt="3-4" bindtap="filter">3-4</text> <text class="{{xingji_id==4?‘active‘:‘‘}}" data-id="5" data-index="1" data-txt="4-5" bindtap="filter">4-5</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="tabLayer" hidden="{{tab[3]}}"> <text class="{{jiage_id==0?‘active‘:‘‘}}" data-id="0" data-index="3" data-txt="报价" bindtap="filter">不限</text> <text class="{{jiage_id==1?‘active‘:‘‘}}" data-id="1" data-index="3" data-txt="从高到低" bindtap="filter">从高到低</text> <text class="{{jiage_id==2?‘active‘:‘‘}}" data-id="2" data-index="3" data-txt="从低到高" bindtap="filter">从低到高</text> </view> <!-- 列表展示 --> <view class=‘list‘> <block wx:for=‘{{designerList}}‘ wx:key=‘list‘ wx:for-item="item"> <view class="list_item"> <navigator url=‘details?id={{item.id}}‘> <view class=‘img‘> <image src="{{imghref}}{{item.img}}" mode="scaleToFill"/> </view> <view class=‘info‘> <view class=‘title‘>{{item.name}} <!-- 状态 --> <image src=‘/images/manglu.png‘></image> </view> <view class=‘price‘>￥{{item.baojia}}</view> <view class=‘num‘>销量{{item.xiaoliang}}</view> <!-- 星级 --> <view class=‘starlv‘> <image src=‘/images/xing.png‘ style=‘size:20rpx‘></image>{{ item.xingji }} </view> </view> </navigator> <view class=‘clear‘></view> </view> </block> </view></view>

/* 下部列表样式 */.viewdown { top:450rpx}.clear{ clear: both; overflow: hidden;} .tabTit{ height:90rpx; line-height: 90rpx; border-bottom: solid 1px #eee; position:fixed; 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: relative; 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;} /* 星级样式 */ .starlv { height: 20rpx; position: absolute; right: 50rpx; font-size: 30rpx }/*弹性盒模型*/.box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; top: 50rpx} 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;}

 1 Page({ 2  data: { 3  chose:‘‘, 4  tabTxt: [‘位置‘, ‘星级‘, ‘成交量‘, ‘报价‘],//分类 5  tab: [true, true, true, true], 6  diqu_id: 0,//地区 7  diqu_txt: ‘‘, 8  jiage_id: 0,//价格 9  jiage_txt: ‘‘, 10  xiaoliang_id: 0,//销量 11  xiaoliang_txt: ‘‘, 12  xingji_id: 0,//星级 13  xingji_txt: ‘‘, 14  // 设计师列表 15  designerList: [], 16  }, 17 //筛选项点击操作 18  filter: function (e) { 19  var self = this,  20  id = e.currentTarget.dataset.id,  21  txt = e.currentTarget.dataset.txt,  22  tabTxt = this.data.tabTxt; 23  switch (e.currentTarget.dataset.index) { 24  // 位置 25  case ‘0‘: 26  tabTxt[0] = txt; 27  self.setData({ 28  tab: [true, true, true, true], 29  tabTxt: tabTxt, 30  diqu_id: id, 31  diqu_txt: txt 32  }); 33  self.getdiquList(); 34  break; 35  // 星级 36  case ‘1‘: 37  tabTxt[1] = txt; 38  self.setData({ 39  tab: [true, true, true, true], 40  tabTxt: tabTxt, 41  xingji_id: id, 42  xingji_txt: txt 43  }); 44  self.getxingjiList(); 45  break; 46  // 成交量 47  case ‘2‘: 48  tabTxt[2] = txt; 49  self.setData({ 50  tab: [true, true, true, true], 51  tabTxt: tabTxt, 52  xiaoliang_id: id, 53  xiaoliang_txt: txt 54  }); 55  self.getxiaoliangList(); 56  break; 57  // 价格 58  case ‘3‘: 59  tabTxt[3] = txt; 60  self.setData({ 61  tab: [true, true, true, true], 62  tabTxt: tabTxt, 63  jiage_id: id, 64  jiage_txt: txt 65  }); 66  break; 67  } 68  //加载数据 69  // self.getDataList(); 70  }, 71  72  //根据选择的地区加载数据 73  getdiquList: function () { 74  //调用数据接口，获取数据 75  var _this = this; 76  wx.request({ 77  url: ‘http://127.0.0.1:8000/designer/‘, 78  header: { "content-type": "application/x-www-form-urlencoded" }, 79  method: "POST", 80  data: { diqu:this.data.diqu_txt}, 81  success: function (res) { 82  // 获取返回的数据（设计师列表） 83  var designer_list = res.data.list 84  _this.setData({ 85  designerList: res.data.list 86  }) 87  } 88  }) 89  }, 90  //根据星级加载数据 91  getxingjiList: function () { 92  //调用数据接口，获取数据 93  var _this = this; 94  wx.request({ 95  url: ‘http://127.0.0.1:8000/designer/‘, 96  header: { "content-type": "application/x-www-form-urlencoded" }, 97  method: "POST", 98  data: { xingji: this.data.xingji_id }, 99  success: function (res) {100  // 获取返回的数据（设计师列表）101  var designer_list = res.data.list102  _this.setData({103  designerList: res.data.list104  })105  }106  })107  },108 )}