老規矩先上效果圖
這里的話 xwml頁面展示就不貼代碼了，意義不大。直接上js

js頁面

注意事項

主要使用的是 onPullDownRefresh 函數與 onReachBottom函數，一個是下拉一個刷新，
requestSimple是我封裝的提交函數，下面貼代碼了

分頁重要

1.onPullDownRefresh 是用戶下拉手勢，相當于刷新頁面，onReachBottom用戶上拉手勢，相當于請求分頁

2.用戶上拉一次，執行一次onReachBottom函數。頁面用同一個 list集合，分頁請求之后，把數據追加到list集合的后面，使用concat函數（代碼中有），思路很簡單。

3.有任何問題，下方留言哈。目前來說沒有遇到任何問題

Page({/*** 頁面的初始數據*/data: {pageIndex: 1, //分頁當前的頁數pageSize: 5,//每頁的數量scheme: false,//方案showLoading: true,showDownLoading: true,urlBase: url.urlBase,//圖片路徑guideList:[],//導游集合},/*** 頁面相關事件處理函數--監聽用戶下拉動作*/onPullDownRefresh: function () {//下拉函數相當于刷新第一頁的數據，所以頁數寫死wx.showNavigationBarLoading() //在標題欄中顯示加載var that = this;let pageNo = 1;requestSimple(url.url.getGuideList,{sort: that.data.sort,scheme: pageParams.pageParams.scheme,city: app.globalData.defaultCity,pageIndex: pageNo,pageSize: 5,minage: that.data.minAge,maxage: that.data.maxAge,sex: that.data.sex,language: that.data.language,viewspot_id: "",certificatetype_id: that.data.certificateId,tourist_long: pageParams.pageParams.userLongitude,tourist_lat: pageParams.pageParams.userLatitude},function (res) {if (res.code == 300) {wx.showToast({title: '沒有更多數據',})} else {if (pageParams.pageParams.scheme == "1") {that.setData({//方案一采用"scheme": true,})}that.setData({//導游列表"guideList": res,})that.data.pageIndex = 1;}});setTimeout(function () {wx.hideNavigationBarLoading() //完成停止加載wx.stopPullDownRefresh() //停止下拉刷新}, 600);},/*** 頁面上拉觸底事件的處理函數*/onReachBottom: function () {var that = this;let pageNo = this.data.pageIndex + 1;//注意這里先將頁數+1 如果請求到了數據，再寫入全局變量，否則不寫。一個思路requestSimple(url.url.getGuideList,{sort: that.data.sort,scheme: pageParams.pageParams.scheme,city: app.globalData.defaultCity,pageIndex: pageNo,pageSize: 5,minage: that.data.minAge,maxage: that.data.maxAge,sex: that.data.sex,language: that.data.language,viewspot_id: "",certificatetype_id: that.data.certificateId,tourist_long: pageParams.pageParams.userLongitude,tourist_lat: pageParams.pageParams.userLatitude},function (res) {if (res.code == 300) {wx.showToast({title: '沒有更多數據',})} else {if (pageParams.pageParams.scheme == "1") {that.setData({guideList: that.data.guideList.concat(res) //注意因為第二次請求的時候數據直接追加到第一頁list的后面，所以使用 concat方法，這個很重要})that.data.pageIndex = that.data.pageIndex + 1; //將頁面+1}});},})

工具類 requestSimple

/*通用request沒有loading-->requestSimple*/ function requestSimple(url, data, success, method, error) {console.log(url,data);var m = method ? method : 'POST';var that = this;return wx.request({url: url,header: {'content-type': 'application/x-www-form-urlencoded;charset=utf-8',},data: data,method: m,success: function (res) {if (res.data.code == "200") {success(res.data.data);return;}else{var ndata = {code:300,msg:"未請求到數據"}success(ndata);}},error: function (res) {error(res);}}) }

總結

以上是生活随笔為你收集整理的微信小程序 列表的分页实现（最新的最简易的实现方式+思路，附代码）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。