小程序端 帶條件的分頁
序言
因為一開始是打算學后端的，但是因為團隊的原因后來去做前端了，只有在課余時間學習了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端的那種點擊下一頁，所以對於頁碼的設置需要格外小心，一個不注意，可能就會導致請求數據的混亂。
參考文獻
無