微信小程序下拉刷新与触底加载

序

近期上线了一个微信小程序，于是，秉着互相学习，互相进步的态度，将常用的下拉刷新和触底加载在这里发表一哈。

效果图

下拉刷新与触底加载.gif

说明

由于下拉刷新和触底加载大多用于从网络请求数据，效果图的实现，去除了网络，通过定时器来达到这么个效果，但是说明原理足够了。

效果图中用到的组件库：

• 底部说明，微信自己的We-UI
• 卡片式布局、加载动图，ColorUI

实现代码

布局与样式都很简单，就不做展示了，只贴JS代码，代码中有简单注释。

const app = getApp()
const LIMIT = 4 //云开发请求时需要

Page({
  data: {
    list: [],
    show_loading: true,
    hide_nomore: true
  },

  elsedata: {
    //只用于模拟实现效果，云开发不必
    list_1: [1, 2, 3, 4],
    list_2: [5, 6], 
    remain_page: 2,
    //云开发时需要
    skip: 0
  },

  onLoad: function() {
    this.getList()
  },

  getList() {
    //此处的数据判断仅用于模拟，云开发时应该用实际请求的数据做判断
    if (this.elsedata.remain_page > 0) {
      let templist = this.data.list.length <= 0 ? this.elsedata.list_1 : this.data.list.concat(this.elsedata.list_2);
      setTimeout(() => {
        this.setData({
          list: templist,
          show_loading: false
        })
        this.elsedata.skip = this.elsedata.skip + LIMIT
        this.elsedata.remain_page -= 1
      }, 1000)
    } else {
      this.setData({
        show_loading: false,
        hide_nomore: false
      })
    }
  },

  //下拉刷新
  onPullDownRefresh: function() {
    if (this.data.list.length <= 0) {
      wx.stopPullDownRefresh()
      return
    }
    this.setData({
      hide_nomore: true
    })
    wx.showLoading({
      title: '请求中',
      mask: true
    })
    this.elsedata.remain_page = 2 //云开发时不必
    this.pullGetData(res => {
      this.elsedata.skip = LIMIT
      this.elsedata.remain_page -= 1 //云开发时不必
      wx.hideLoading()
      wx.stopPullDownRefresh()
    })
  },
  
  pullGetData: function(callback) {
    let tempres = this.elsedata.list_1 //云开发时需要使用实际数据
    //定时器也只是为了模拟效果
    setTimeout(() => {
      this.setData({
        list: tempres
      }, res => {
        callback();
      })
    }, 1000)
  },

  //触底加载
  onReachBottom: function() {
    if (this.data.show_loading)
      return
    if (!this.data.hide_nomore)
      return
    this.setData({
      show_loading: true,
      hide_nomore: true
    })
    this.getList()
  }
})