6.7【微信小程序全栈开发课程】记录页面（七）--分页加载记录数据

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

<!-- 参考代码，无需粘贴
<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>

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.records
  this.records = this.records.concat(records.records)
  //***需要添加的代码***
  //每次在数据库中查找15条数据，如果查出的数据不足15条说明这是最后一页了，将more改为false
  if (records.records.length < 15 && this.page > 0) {
    this.more = false
  }
  //通过records数组的长度来判断show_record变量为false或者true
  if(this.records.length === 0){
    this.show_record = true
  }else{
    this.show_record = false
  }
  console.log("从后台返回的记录数据：",this.records)
  wx.hideToast()
}

//参考代码，无需粘贴
//onShareAppMessage(e) {
  //...
//},
// 需要添加的代码
onReachBottom () {
  // 如果more为false，说明没有更多数据了，不需要再加载getRecords方法，return结束加载
  if (!this.more) {
    return false
  }
  // 加载下一页
  this.page = this.page + 1
  console.log("this.page",this.page)
  this.getRecords()
},

//原代码
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)

//getRecords方法添加一个参数init
async getRecords (init) {
  if(init){
    this.page = 0
    this.more = true
  }
  //参考代码，无需粘贴
  //wx.showToast({
    //title: '加载中',
    //icon: 'loading'
  //})
  //...
//}

//原代码
this.getRecords()
//修改为
this.getRecords(true)

7、下拉重置页面
下拉函数我们之前讲过是onPullDownRefresh，使用这个函数，需要现在main.json文件里面授权
（1）在src/pages/record文件夹下面新建main.json文件，并在文件中添加代

//参考代码，无需粘贴
//onReachBottom () {
  //…
//}
//需要添加的代码
onPullDownRefresh () {
  this.getRecords(true)
  wx.stopPullDownRefresh()
}