小程序端分页
小程序端 带条件的分页
序言
因为一开始是打算学后端的，但是因为团队的原因后来去做前端了，只有在课余时间学习了SSM还有Springboot，也没有在团队项目中用上，前端也是要用什么，去学什么，没有什么太拿得出手的技术要讲（vue跟小程序开发的官方文档都找得到，没啥好讲的）。
技术概述
当小程序端需要请求的数据特别多，但是不要求一次性显示出来的时候，可以使用分页，在需要的时候再请求下一页内容。
分页本身没有难点，难点在于怎么正确的给分页传入正确的、合适的参数而得到正确的内容。
技术详述
流程图(思路)
过程代码
data绑定数据
data: {
searchInput: "",//搜索框内容
tabIndex: 0,//标签页下标
secTime: "时间",//二手-时间筛选
secSort: "类别",//二手-类别筛选
secDegree: "新旧程度",//二手-新旧筛选
taskTime: "时间",//任务-时间筛选
taskSort: "类别",//任务-类别筛选
activityTime: "时间",//活动-时间筛选
activitySort: "类别",//活动-类别筛选
goodsPage: 1,//当前请求页
taskPage: 1,
activityPage: 1,
}
下拉刷新函数
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
this.searchNext();//搜索下一页
},
/**
* 下拉刷新
*/
searchNext: function() {
let pageid;
switch(this.data.tabIndex) {
case 0://二手物品
pageid = this.data.goodsPage;
pageid++;
this.setData({
goodsPage: pageid
})
break;
case 1://任务
case 2://活动
//当前是哪个部分下拉到最底部，就哪个pageid+1
this.searchOne();//搜索
},
搜索时置页数为1
/**
* 搜索功能
*/
search: function() {
this.setData({
goodsPage: 1,
taskPage: 1,
activityPage: 1
})
this.searchOne();//这个函数用于获取搜索条件及筛选条件并发送请求
},
带条件搜索函数searchOne()与分页请求
/**
* 搜索函数
*/
searchOne: function() {
var keyWord = this.data.searchInput;
switch(this.data.tabIndex) {
case 0:
//从data中获取以下四个参数
//……
this.search_Sec(days, secSortId, condition, keyWord, this.data.goodsPage);
break;
case 1:
case 2:
}
},
/**
* 搜索二手物品
*/
search_Sec: function(days, categoryId, condition, keyWord, pageid) {
let that=this;
wx.request({
url: 'xxx',
header: {
'Content-Type': 'application/x-www-form-urlencoded',
'Cookie': wx.getStorageSync('sessionid'),
'token': app.globalData.token
},
data: {
days: days,
categoryId: categoryId,
condition: condition,
keyWord: keyWord,
pageid: pageid //当前需要搜索的页号
},
method: "POST",
success(res){
console.log(res);
if(res.data.code == 200){
var list = res.data.data;//json中的data数组
console.log(list);
if(pageid != 1) {
list = that.data.goodsList.concat(list);
}/*如果pageid不为1，就把新的数组拼接到goodsList
否则直接把请求得到的数组赋值给goodsList
*/
that.setData({
goodsList: list
})
}
}
})
},
问题与解决方法
问题1：下拉刷新时，如果是先搜索，再下拉刷新，那下拉时新请求的数据是否附带搜索条件？
解决方法：利用data变量双向绑定搜索条件，每次下拉刷新的时候，实际上触发的是搜索功能，附带条件搜索，只是请求的时候，直接搜索时把currentpage置为1，而下拉刷新时把currentpage+1
问题2：页码要在何时归1，何时+1，何时不变？
解决方法：在data初始值中全赋为1，在点击搜索时currentpage归1再搜索，下拉刷新时currentpage+1后再请求，另外的，由于我在onShow()函数中重新获取列表信息（为了修改能及时反馈到列表），在重新请求之前，需要把所有currentpage归1。
总结
小程序端的分页其实不难，但是要思路清晰，可以参照web端分页的思路进行设计，但是不同的是小程序的下一页是通过下拉触底函数触发的，而不是通过web端的那种点击下一页，所以对于页码的设置需要格外小心，一个不注意，可能就会导致请求数据的混乱。
参考文献
无
