微信小程序列表筛选组件

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.js
Page({

  /**
   * 页面的初始数据
   */
  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 () {
    //调用数据接口，获取数据


  }

})