【微信小程序】 列表查询功能

 

对应本地生活案例：

?

1	https://www.bilibili.com/video/BV1834y1676P?p=52

 

HTML代码部分：

就是普通的wx-for指令遍历

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<!--pages/classPage/classPage.wxml--> <!-- <text>pages/classPage/classPage.wxml</text> --> <!-- <text> id: {{query.id}} | 分类: {{query.name}} </text> --> <view   class="item"   wx:for="{{list}}"   wx:key="id"   wx:for-index="idx"   wx:for-item="item" >   <!-- 左边展示图片 -->   <view class="thumb">     <image src="{{item.images[0]}}"></image>   </view>   <!-- 右边展示文本 -->   <view class="content">     <text class="title">{{item.name}}</text>     <text>电话：{{tools.phoneNoHandle(item.phone)}}</text>     <text>地址：{{item.address}}</text>     <text>营业时间：{{item.businessHours}}</text>   </view> </view>   <!-- 导入wxs脚本 --> <wxs src="../../utils/tools.wxs" module="tools"></wxs>

CSS样式代码：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37

/* pages/classPage/classPage.wxss */   /* 左右布局 */ .item {   display: flex;   justify-content: space-around;     padding: 15rpx;   border: 1rpx solid #efefef;   border-radius: 8rpx;   margin: 15rpx;     /* 盒子阴影 */   box-shadow: 1rpx 1rpx 15rpx #ddd; }   /* 图片控制 */ .thumb image  {   width: 250rpx;   height: 250rpx;   display: block;     margin-right: 15rpx;   border-radius: 8rpx; } /* 文本布局 */ .content {   display: flex;   flex-direction: column;   justify-content: space-around;   /* 字体拉小 */   font-size: 24rpx; }   .title {   font-weight: bolder; }

JS代码部分：

1、完成接口请求初始化数据列表加载

2、配置上拉触底功能开启，在上拉加载的钩子函数中编写翻页请求，

　　- 1、注意是叠加数据列表，而不是重置

　　- 2、配置微信加载提示弹窗

3、如何判断翻到了最后一页，数据全部查完的状态

4、设置节流阀变量，控制请求加载的时候不能重复请求

5、配置下拉刷新功能开启

　　- 1、重置翻页变量

　　- 2、将停止下拉效果入参到请求方法中实现调用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165

// pages/classPage/classPage.js Page({     /**    * 页面的初始数据    * 小程序的data 不能使用嵌套对象，this.setData方法会覆盖data属性    */   data: {     query: {}, // 导航接参     list:[], // 列表容器     pageIndex: 1, // 翻页参数     pageSize: 10, // 每次请求10条数据     total: 0, // 总记录数       isLoading: false // 请求阀门   },     /**    * 生命周期函数--监听页面加载    */   onLoad(options) {     // 导航接参     this.setData({ query: options})       // 请求接口     this.getListData()   },   /**    * 获取每个具体分类的数据列表    * GET请求    * https://www.escook.cn/categories/:cate_id/shops    * _page 表示请求第几页的数据    * _limit 表示每页请求几条数据    *    */   getListData(callBack) {     // 打开阀门     this.setData({ isLoading: true })     // 开启加载提示     wx.showLoading({ title: '数据加载中' })       // 请求数据     wx.request({       url: `https://www.escook.cn/categories/${this.data.query.id}/shops`,       method: 'GET',       data: {         _page: this.data.pageIndex,         _limit: this.data.pageSize       },       success: ( { data: res, header }) => {         console.log(res)         // 保存加载的数据         this.setData({           list: [             ...this.data.list,             ...res           ],           total: parseInt(header['X-Total-Count']),             //  内部对象不会保存起来           pageIndex: this.data.pageIndex,           pageSize: this.data.pageSize         })           console.log(this.data.total)       },       complete: () => {         // 关闭加载提示         wx.hideLoading()         // 关闭阀门         this.setData({ isLoading: false })           // 停止下拉刷新的操作也放在这里         // wx.stopPullDownRefresh()         callBack && callBack()       }     })   },     /**    * 生命周期函数--监听页面初次渲染完成    * 页面初次渲染完成时触发。    * 一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。    * 注意:对界面内容进行设置的API如wx. setNavigationBarTitle,请在onReady之后进行。    */   onReady() {     // 从onLoad函数加载到query参数后 改变导航标题     wx.setNavigationBarTitle({       title: this.data.query.name     })   },     /**    * 生命周期函数--监听页面显示    */   onShow() {     },     /**    * 生命周期函数--监听页面隐藏    */   onHide() {     },     /**    * 生命周期函数--监听页面卸载    */   onUnload() {     },     /**    * 页面相关事件处理函数--监听用户下拉动作    */   onPullDownRefresh() {     // 重置页数、总记录数、和容器     this.setData({       pageIndex: 1,       total: 0,       list: []     })     // 重新请求 并且请求完成停止刷新效果     this.getListData(() => {       wx.stopPullDownRefresh()     })   },     /**    * 页面上拉触底事件的处理函数    */   onReachBottom() {     /**      * 判断翻页是否超过总数据      * 3.判断是否还有下一页数据，如果下面的公式成立，则证明没有下一页数据了:      *  页码值 * 每页显示多少条数据 >= 总数据条数      *  page * pageSize >= total      *      */     let pageCount =       this.data.pageIndex * this.data.pageSize     if (pageCount >= this.data.total) {       wx.showToast({         icon: 'none', // 不设置任何图标         title: '已经到底了', // 提示文本         duration: 3000, // 持续3秒       })       return     }       // 根据阀门状态判断是否继续请求     if (this.data.isLoading) return     // 上拉加载翻一页     this.setData({ pageIndex: this.data.pageIndex + 1 })     this.getListData()   },     /**    * 用户点击右上角分享    */   onShareAppMessage() {     }, })

页面JSON配置：

?

1 2 3 4 5 6 7 8

{   "usingComponents": {},   "onReachBottomDistance": 200,     "enablePullDownRefresh": true,   "backgroundColor": "#efefef",   "backgroundTextStyle": "dark" }

　　

WXS模块：

将电话号码加入横杠分隔符的方法

13888888888 -> 138-8888-8888

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

// utils/tools.wxs /**  * 手机号处理  * @param {} phone  */ function phoneNoHandle(phone) {   if (11 !== phone.length) return phone   var arr = phone.split('')       // 插入减号   arr.splice(3, 0, '-')   arr.splice(8, 0, '-')   return arr.join('') }   /**  * 导出wxs模块  */ module.exports = {   phoneNoHandle: phoneNoHandle }