小程序的探索之旅--列表筛选排序

2023-11-13 14:46:46

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>
wxml

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;
}
wxss

 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 )}
js

 

小程序的探索之旅--列表筛选排序

上一篇：Vant Weapp小程序蹲坑之使用checkbox组件


下一篇：Python小程序之「读取站点地图 自动为Gitalk创建Issues」