172
微信小程序开发分页的坑
微信小程序开发中list列表经常要进行分页处理，踩坑在所难免。
app.json
"enablePullDownRefresh": true
wxml
<view wx:if="{{showEmpty}}">暂无数据</view>
<scroll-view wx:else scroll-y="true" style="height: 100vh" bindscrolltolower="getMoreList">
<view wx:for="{{list}}" wx:key="index">
// ...内容省略
</view>
</scroll-view>
js
const httpUtil = require('../../../utils/httpUtil.js') // 网络请求工具
const api = require('../../../config/api.js') // api文件
const size = 10; // 每页数据量
let current = 1; // 当前页数
let maxPage = 0; // 最大页数
Page({
data: {
showEmpty: false,
list: []
},
getList() {
const that = this
httpUtil.getRequest(api.getRecordList, {
current,
size
}, (res) => {
const { records = [], pages } = res;
if (current === 1 && records.length === 0) {
that.setData({
showEmpty: true
})
return
}
let { list } = that.data
maxPage = pages;
let recordList = current === 1 ? list : list.concat(records)
that.setData({
list: recordList,
showEmpty: false
})
}, () => {})
},
getMoreList() {
if (current < maxPage) {
current++;
this.getList();
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this.getList()
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
current = 1;
this.getList();
wx.stopPullDownRefresh();
}
})
看似没问题的分页逻辑代码，存在3个大坑
坑一：页面返回后，再次进入list页面，curent maxPage变量不会初始化重置
解决方法1:
onLoad: function (options) {
current = 1;
maxPage = 0;
this.getList()
},
解决方法2:
Page({
data: {
showEmpty: false,
list: []
},
current: 1, // 运用时this.current
maxPage: 0 // 运用时this.maxPage
})
坑二：page自带的onPullDownRefresh与scroll-view的刷新功能冲突，将会失效
解决方法：(view替换scroll-view)
<view wx:if="{{showEmpty}}">暂无数据</view>
<view wx:else style="height: 100vh">
<view wx:for="{{list}}" wx:key="index">
// ...内容省略
</view>
</view>
js:
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
if (current < maxPage) {
current++;
this.getDeviceList();
}
},
坑三：加载页面数据，size值偏小，永远无法触底
如果一个页面，每条item高度较小。第一页加载完后无法撑满整个页面的高度，这样将永远无法触发页面底部加载更多的方法
170
解决方法：增加每页的加载量，size增大
const size = 15; // 每页数据量
