开发微信小程序分页功能的坑

172

微信小程序开发分页的坑

微信小程序开发中list列表经常要进行分页处理，踩坑在所难免。

app.json

"enablePullDownRefresh": true

wxml

暂无数据

  
    // ...内容省略
  

js

const httpUtil = require('../../../utils/httpUtil.js')  // 网络请求工具
const api = require('../../../config/api.js')           // api文件
const size = 10;   // 每页数据量
let current = 1;   // 当前页数
let maxPage = 0;   // 最大页数

Page({
  data: {
    showEmpty: false,
    list: []
  },
  
  getList() {
    const that = this
    httpUtil.getRequest(api.getRecordList, {
      current,
      size
    }, (res) => {
      const { records = [], pages } = res;
      if (current === 1 && records.length === 0) {
        that.setData({
          showEmpty: true
        })
        return
      }
      let { list } = that.data
      maxPage = pages;
      let recordList = current === 1 ? list : list.concat(records)
      that.setData({
        list: recordList,
        showEmpty: false
      })
    }, () => {})
  },
  
  getMoreList() {
    if (current < maxPage) {
      current++;
      this.getList();
    }
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getList()
  },
  
   /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    current = 1;
    this.getList();
    wx.stopPullDownRefresh();
  }
})

看似没问题的分页逻辑代码，存在3个大坑

坑一：页面返回后，再次进入list页面，curent maxPage变量不会初始化重置

解决方法1:

onLoad: function (options) {
  current = 1;
  maxPage = 0;
  this.getList()
},

解决方法2:

Page({
  data: {
    showEmpty: false,
    list: []
  },
  current: 1,   // 运用时this.current
  maxPage: 0    // 运用时this.maxPage
})

坑二：page自带的onPullDownRefresh与scroll-view的刷新功能冲突，将会失效

解决方法：(view替换scroll-view)

暂无数据

  
    // ...内容省略
  

js:

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    if (current < maxPage) {
      current++;
      this.getDeviceList();
    }
  },

坑三：加载页面数据，size值偏小，永远无法触底

如果一个页面，每条item高度较小。第一页加载完后无法撑满整个页面的高度，这样将永远无法触发页面底部加载更多的方法

170

解决方法：增加每页的加载量，size增大

const size = 15;   // 每页数据量