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

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

原文地址：https://www.cnblogs.com/Clay-i/p/10360612.html

时间： 2024-10-25 15:10:22

小程序的探索之旅--列表筛选排序的相关文章

小程序的探索之旅--与Django的数据交互

django服务端:(获取和返回) Django获取客户端发来的请求request: 首先,要知道请求的类型(method):POST/GET 然后用get方法获取需要的内容: request.GET.get() request.POST.get() Django返回响应: 返回字典类型的数据 dic = { 'name': user.name, 'email': user.email, 'num': user.number } return JsonResponse(dic) 小程序客户端 客

小程序踩坑之旅

小程序踩坑之旅 —— 分包 小程序踩坑之旅 —— 分享 小程序踩坑之旅 —— 页面路由 小程序踩坑之旅 —— canvas 原文地址:https://www.cnblogs.com/xxhuan/p/11334792.html

【小程序】小程序性能探索----骨架屏

骨架屏是什么? 在Goole提出的以用户为中心的四个页面性能衡量指标中,FP/FCP(首屏渲染). 关于尽快渲染出首屏,减少白屏时间,常见的优化方式大致有以下几种: 1. 优化关键渲染路径,尽可能减少阻塞渲染的JavaScript和CSS,常见做法包括使用async/defer让浏览器下载JavaScript的同时不阻塞HTML解析,内联页面关键部分的 样式 2. 使用Service Worker 缓存AppShell,加快后续访问速度. 3. 使用HTTP/2 Server Push,帮助浏览

购物车小程序（while循环，列表）

1 while True: 2 salary = input("please input your salary:") 3 if salary.isdigit(): 4 salary=int (salary) 5 break 6 else: 7 print("Invalid input! please input a number:") 8 9 product_cart = [['iphone6s',5800], #定义商品列表 10 ['macbook',9000

微信 小程序布局 标题之二分列表

<view class="commodity-zone"> <!-- 系列商品模板 --> <block class="zone-among" wx:key="teaamong" wx:for="{{teaamong}}" wx:for-index="index"> <!-- 控制显示与隐藏的外衣 --> <view wx:if="{{item

完美解决小程序一维数组循环渲染列表不够用问题

<view class="local" id="{{itemName.id}}" data="{{itemName.name}}" class="list" bindtap='fastSearch' wx:for="{{getSearch}}" wx:for-index="" wx:for-item="itemName" wx:key=""&

【微信小程序】二维数组列表渲染

Page({ mapData:[ [{id:11},{id:12}], [{id:21},{id:22}], [{id:31},{id:32},{id:33}] ] }) <view class="container"> <view class="map"> <view wx:for="{{mapData}}"> <view wx:for="{{item}}"> {{item.i

微信小程序－wx:for 循环列表

获取了 N 条信息(具体有多少条不确定),如何在界面中动态呈现出来呢? .wxml 代码 <view wx:for="{{items}}" wx:for-index="index" wx:for-item="item">{{index+1}}.{{item.title}}</view> 核心代码就是 wx:for,对应一个数组. 而 wx:for-index 指明后面如果要用数组索引的话,           用什么名字,

微信小程序源码下载（200多个）

微信小程序源码下载汇总,点击标题进入对应的微信小程序下载页面. 最新 demo源码(点击标题进入帖子下载) 描述 1 微信小程序 会议室预定小程序 微信小程序 会议室预定小程序**** 本内容被作者隐藏 **** 2 微信小程序-双人五子棋小游戏 微信小程序-双人五子棋小游戏**** 本内容被作者隐藏 **** 3 打卡签到小程序 用微信小程序实现的一个简单的打卡签到的小程序拒绝 4 微信小程序---左滑删除 微信小程序---左滑删除**** 本内容被作者隐藏 **** 5 一个借钱的记事本的微