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

js頁面

注意事項

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

分頁重要

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

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

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

Page({/*** 頁面的初始數(shù)據(jù)*/data: {pageIndex: 1, //分頁當(dāng)前的頁數(shù)pageSize: 5,//每頁的數(shù)量scheme: false,//方案showLoading: true,showDownLoading: true,urlBase: url.urlBase,//圖片路徑guideList:[],//導(dǎo)游集合},/*** 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作*/onPullDownRefresh: function () {//下拉函數(shù)相當(dāng)于刷新第一頁的數(shù)據(jù)，所以頁數(shù)寫死wx.showNavigationBarLoading() //在標(biāo)題欄中顯示加載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: '沒有更多數(shù)據(jù)',})} else {if (pageParams.pageParams.scheme == "1") {that.setData({//方案一采用"scheme": true,})}that.setData({//導(dǎo)游列表"guideList": res,})that.data.pageIndex = 1;}});setTimeout(function () {wx.hideNavigationBarLoading() //完成停止加載wx.stopPullDownRefresh() //停止下拉刷新}, 600);},/*** 頁面上拉觸底事件的處理函數(shù)*/onReachBottom: function () {var that = this;let pageNo = this.data.pageIndex + 1;//注意這里先將頁數(shù)+1 如果請求到了數(shù)據(jù)，再寫入全局變量，否則不寫。一個思路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: '沒有更多數(shù)據(jù)',})} else {if (pageParams.pageParams.scheme == "1") {that.setData({guideList: that.data.guideList.concat(res) //注意因為第二次請求的時候數(shù)據(jù)直接追加到第一頁list的后面，所以使用 concat方法，這個很重要})that.data.pageIndex = that.data.pageIndex + 1; //將頁面+1}});},})

工具類 requestSimple

/*通用request沒有l(wèi)oading-->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:"未請求到數(shù)據(jù)"}success(ndata);}},error: function (res) {error(res);}}) }

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。