現(xiàn)在是一次性加載所有的記錄數(shù)據(jù)，數(shù)據(jù)多的時(shí)候，會(huì)加載比較慢，所以我們改成分頁加載，一次最多加載15條數(shù)據(jù)

每次拉倒底部都會(huì)自動(dòng)加載下一頁的數(shù)據(jù)，知道所有的數(shù)據(jù)加載完成

1、添加data變量

編輯record.vue文件，添加兩個(gè)變量page和more

page默認(rèn)為0，表示當(dāng)前的頁數(shù)；more默認(rèn)為true，用來控制底部顯示的信息

data () {return {show_record:false,userinfo:{},records:[],page: 0,more: true} },

2、添加底部頁面代碼

<!-- 參考代碼，無需粘貼 <RecordList :key='index' v-for='(record,index) in records' :record = 'record'></RecordList> --><!-- 需要添加的部分 --> <!-- 如果more為false，底部顯示「沒有更多數(shù)據(jù)」 --> <p class="text-footer" v-if="!more">沒有更多數(shù)據(jù) </p> <!-- 如果records數(shù)據(jù)一共不到15條，底部什么也不用顯示 --> <p class="text-footer" v-else-if="records.length < 15"> </p> <!-- 如果more為true，并且總記錄大于15條，底部顯示加載中 --> <p class="text-footer" v-else>加載中··· </p>

3、編輯getRecords方法

根據(jù)下面的提示編輯方法

async getRecords () {//調(diào)用后臺(tái)數(shù)據(jù)時(shí)顯示「加載中」提示框wx.showToast({title: '加載中',icon: 'loading'})//***需要添加的代碼***if(this.page === 0){this.records = []}//需要傳到后臺(tái)的數(shù)據(jù)const data = {openid: this.userinfo.openId,//***需要添加的代碼***page: this.page}//將后臺(tái)傳過來的數(shù)據(jù)保存到records變量中const records = await get('/weapp/getrecords', data)//concat是拼接數(shù)組的方法，將新查出的數(shù)據(jù)，拼接到records數(shù)組中//***需要編輯的代碼***// this.records = records.recordsthis.records = this.records.concat(records.records)//***需要添加的代碼***//每次在數(shù)據(jù)庫中查找15條數(shù)據(jù)，如果查出的數(shù)據(jù)不足15條說明這是最后一頁了，將more改為falseif (records.records.length < 15 && this.page > 0) {this.more = false}//通過records數(shù)組的長度來判斷show_record變量為false或者trueif(this.records.length === 0){this.show_record = true}else{this.show_record = false}console.log("從后臺(tái)返回的記錄數(shù)據(jù)：",this.records)wx.hideToast() }

4、到達(dá)底部加載數(shù)據(jù)

onReachBottom函數(shù)是到達(dá)小程序頁面底部會(huì)觸發(fā)的函數(shù)，我們?cè)谶@里面調(diào)用getRecords方法，每次小程序頁面下拉到底部，都會(huì)自動(dòng)觸發(fā)getRecords方法，調(diào)用record數(shù)據(jù)

//參考代碼，無需粘貼 //onShareAppMessage(e) {//... //},// 需要添加的代碼 onReachBottom () {// 如果more為false，說明沒有更多數(shù)據(jù)了，不需要再加載getRecords方法，return結(jié)束加載if (!this.more) {return false}// 加載下一頁this.page = this.page + 1console.log("this.page",this.page)this.getRecords() },

5、修改后臺(tái)操作文件

也就是server/controllers/getrecords.js文件，接收到當(dāng)前的頁面page數(shù)據(jù)，加載相應(yīng)數(shù)據(jù)

//原代碼 const {openid} = ctx.request.query//修改為 const {openid,page} = ctx.request.query //原代碼 const records = await mysql('records').select('id','add','mark','note','create_time').where("openid",openid).orderBy('id','desc')//修改為 const records = await mysql('records').select('id','add','mark','note','create_time').where("openid",openid).orderBy('id','desc').limit(15).offset(Number(page) * 15)

limit n offset m是mysql的分頁語句 代碼從m行開始查，查找n條數(shù)據(jù)

6、重置頁面

每次切換到記錄頁面，用戶應(yīng)該最想看到最新數(shù)據(jù)，所以需要將page變量設(shè)為0

（1）給getRecords方法添加一個(gè)參數(shù)init，并且當(dāng)init為true時(shí)，將page重置為0，more重置為true

//getRecords方法添加一個(gè)參數(shù)init async getRecords (init) {if(init){this.page = 0this.more = true}//參考代碼，無需粘貼//wx.showToast({//title: '加載中',//icon: 'loading'//})//... //}

（2）編輯onShow中的getRecords方法，添加參數(shù)true

//原代碼 this.getRecords()//修改為 this.getRecords(true)

7、下拉重置頁面

下拉函數(shù)我們之前講過是onPullDownRefresh，使用這個(gè)函數(shù)，需要現(xiàn)在main.json文件里面授權(quán)

（1）在src/pages/record文件夾下面新建main.json文件，并在文件中添加代碼

{"enablePullDownRefresh":true }

（2）在record.vue文件中添加onPullDownRefresh函數(shù)，并調(diào)用getRecords方法

//參考代碼，無需粘貼 //onReachBottom () {//… //}//需要添加的代碼 onPullDownRefresh () {this.getRecords(true)wx.stopPullDownRefresh() }

8、測(cè)試

保存所有修改的文件，打開微信開發(fā)者工具測(cè)試效果

在首頁點(diǎn)擊按鈕，生成20條左右的記錄

切換到記錄頁面，查看下面幾個(gè)方面：

（1）上翻小程序到達(dá)底部，查看是否會(huì)自動(dòng)加載數(shù)據(jù)，加載完所有數(shù)據(jù)，底部會(huì)顯示沒有更多數(shù)據(jù)

（2）下拉小程序，查看頁面是否更新

（3）切換頁面，查看頁面是否更新

作者：貓寧一 95后全棧程序媛?? ??? ??一枚~ 熱愛學(xué)習(xí)！熱愛編程！
可關(guān)注【貓寧一】公眾號(hào)領(lǐng)取我所有全棧項(xiàng)目代碼哦~點(diǎn)擊查看課程目錄：微信小程序全棧開發(fā)課程目錄

總結(jié)

以上是生活随笔為你收集整理的上拉加载更多后台数据_6-7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据...的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

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