关于微信小程序下拉刷新、上拉触底方法的实现

在日常项目开发中，前端工程师会不可避免的接触到微信小程序的开发，在开发时会遇到下拉刷新、上拉加载的问题。就让我们直接步入正题吧。

关于下拉刷新

一、在json文件中启用下拉事件

1.放在app.json文件中，注意这里写入是小程序所有页面启用下拉事件，一般情况下不会所有页面都启用；

2.放在单独页面对应的 .json文件中，此时只有单页面触发下拉事件。

"enablePullDownRefresh": true,

"backgroundTextStyle": "dark"

其中 backgroundTextStyle 是用来配置下拉刷新loading的样式，仅支持dark和light两个颜色属性

然后进入到我们的js文件中

二、在js文件中使用 onPullDownRefresh 方法

onPullDownRefresh: function () {
    this.setData({
      list: [],
    })
    wx.showNavigationBarLoading()
    // 定义下拉事件触发时，弹出的提示框
    wx.showToast({
      title: 'loading....',
      icon: 'loading',
      duration: 500
    });
    // 这里做了个延时功能，可不写
    setTimeout(() => {
      wx.hideNavigationBarLoading()  // 隐藏导航条加载动画
      wx.stopPullDownRefresh()       // 停止当前页面下拉刷新
      // 这里进行 接口方法的调用
      this.list();
    }, 500);
  },

###### 下拉刷新到这里就结束了。

关于上拉触底

一、在js中我们需要先定义好基础参数。

Page({
  /**
   * 页面的初始数据
   */
  data: {
    page: 1,   // 页码
    size: 10,  // 每页数据数
    total: 0,  // 数据总数
  },
  //  这里为请求接口方法，请自定义 
  getList(){

  }
})

二、进入 onReachBottom 上拉触底这个API方法

让我们直接进入代码吧

onReachBottom: function () {
    var p = this.data.page;
    var s = this.data.size;
    var t = this.data.titol;
    // 当页码数乘每页数据量小于总数量时，页码数+1，同时再次请求接口请求新的数据
    if (p * s < t) {
        p=p+1;
        this.setData({
            page:p
        })
        this.getList();  //自己需要重新加载的
    }else{
        // 这里直接给出提示就好了
        wx.showToast({
            title: '暂无更多数据啦',
            icon: 'none',
            duration: 2000
        });
    }
}}

###### 上拉触底到这里就结束了，希望有用哦