小程序的探索之旅--列表筛选排序
Posted clay-i
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了小程序的探索之旅--列表筛选排序相关的知识，希望对你有一定的参考价值。
wxml页面显示内容
<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>
wxss页面样式
/* 下部列表样式 */
.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;
}
js页面逻辑与数据交互
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.list 102 _this.setData({ 103 designerList: res.data.list 104 }) 105 } 106 }) 107 }, 108 )}
以上是关于小程序的探索之旅--列表筛选排序的主要内容，如果未能解决你的问题，请参考以下文章