微信小程式列表篩選元件
阿新 • • 發佈:2018-12-17
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 () { //呼叫資料介面,獲取資料 } })