現在是一次性加載所有的記錄數據，數據多的時候，會加載比較慢，所以我們改成分頁加載，一次最多加載15條數據
每次拉倒底部都會自動加載下一頁的數據，知道所有的數據加載完成
1、添加data變量
編輯record.vue文件，添加兩個變量page和more
page默認為0，表示當前的頁數；more默認為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，底部顯示「沒有更多數據」 -->
<p class="text-footer" v-if="!more">沒有更多數據
</p>
<!-- 如果records數據一共不到15條，底部什么也不用顯示 -->
<p class="text-footer" v-else-if="records.length < 15">
</p>
<!-- 如果more為true，并且總記錄大于15條，底部顯示加載中 -->
<p class="text-footer" v-else>加載中···
</p>3、編輯getRecords方法
根據下面的提示編輯方法
async getRecords () {//調用后臺數據時顯示「加載中」提示框wx.showToast({title: '加載中',icon: 'loading'})//***需要添加的代碼***if(this.page === 0){this.records = []}//需要傳到后臺的數據const data = {openid: this.userinfo.openId,//***需要添加的代碼***page: this.page}//將后臺傳過來的數據保存到records變量中const records = await get('/weapp/getrecords', data)//concat是拼接數組的方法，將新查出的數據，拼接到records數組中//***需要編輯的代碼***// this.records = records.recordsthis.records = this.records.concat(records.records)//***需要添加的代碼***//每次在數據庫中查找15條數據，如果查出的數據不足15條說明這是最后一頁了，將more改為falseif (records.records.length < 15 && this.page > 0) {this.more = false}//通過records數組的長度來判斷show_record變量為false或者trueif(this.records.length === 0){this.show_record = true}else{this.show_record = false}console.log("從后臺返回的記錄數據：",this.records)wx.hideToast()
}
4、到達底部加載數據
onReachBottom函數是到達小程序頁面底部會觸發的函數，我們在這里面調用getRecords方法，每次小程序頁面下拉到底部，都會自動觸發getRecords方法，調用record數據
//參考代碼，無需粘貼
//onShareAppMessage(e) {//...
//},// 需要添加的代碼
onReachBottom () {// 如果more為false，說明沒有更多數據了，不需要再加載getRecords方法，return結束加載if (!this.more) {return false}// 加載下一頁this.page = this.page + 1console.log("this.page",this.page)this.getRecords()
},
5、修改后臺操作文件
也就是server/controllers/getrecords.js文件，接收到當前的頁面page數據，加載相應數據
//原代碼
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條數據
6、重置頁面
每次切換到記錄頁面，用戶應該最想看到最新數據，所以需要將page變量設為0
（1）給getRecords方法添加一個參數init，并且當init為true時，將page重置為0，more重置為true
//getRecords方法添加一個參數init
async getRecords (init) {if(init){this.page = 0this.more = true}//參考代碼，無需粘貼//wx.showToast({//title: '加載中',//icon: 'loading'//})//...
//}
（2）編輯onShow中的getRecords方法，添加參數true
//原代碼
this.getRecords()//修改為
this.getRecords(true)
7、下拉重置頁面
下拉函數我們之前講過是onPullDownRefresh，使用這個函數，需要現在main.json文件里面授權
（1）在src/pages/record文件夾下面新建main.json文件，并在文件中添加代碼
{"enablePullDownRefresh":true
}（2）在record.vue文件中添加onPullDownRefresh函數，并調用getRecords方法
//參考代碼，無需粘貼
//onReachBottom () {//…
//}//需要添加的代碼
onPullDownRefresh () {this.getRecords(true)wx.stopPullDownRefresh()
}
8、測試
保存所有修改的文件，打開微信開發者工具測試效果
在首頁點擊按鈕，生成20條左右的記錄
切換到記錄頁面，查看下面幾個方面：
（1）上翻小程序到達底部，查看是否會自動加載數據，加載完所有數據，底部會顯示沒有更多數據
（2）下拉小程序，查看頁面是否更新
（3）切換頁面，查看頁面是否更新
作者：貓寧一 95后全棧程序媛?? ??? ??一枚~ 熱愛學習！熱愛編程！
可關注【貓寧一】公眾號領取我所有全棧項目代碼哦~點擊查看課程目錄：微信小程序全棧開發課程目錄
：數據運算)
