微信小程序中的下拉刷新和上拉加载

最新推荐文章于 2024-08-04 00:34:17 发布

j_kaixin

最新推荐文章于 2024-08-04 00:34:17 发布

阅读量1.6k

点赞数

本文链接：https://blog.csdn.net/j_kaixin/article/details/80431654

版权

本文介绍了微信小程序中如何实现下拉刷新和上拉加载功能。下拉刷新涉及重请求数据和状态初始化，而上拉加载需服务器分页配合。微信小程序通过在app.json或页面.json配置enablePullDownRefresh启用下拉刷新，onReachBottomDistance设定触发距离。启用后，onPullDownRefresh方法用于处理刷新逻辑，最后调用wx.stopPullDownRefresh结束刷新。上拉加载则直接触发onReachBottom方法，无需额外配置。

摘要由CSDN通过智能技术生成

上篇文章中说的是人脸检测V3，今天俺们说下微信小程序中的下拉刷新和上拉加载。

下拉刷新和上拉加载既独立又联系的功能，下拉刷新除了需要重新请求服务器数据外还要对之前的状态和页码进行初始化。而上拉加载需要服务器端有分页机制，和对数据的添加和页码的上拉变化，以及状态的改变。

微信小程序对下拉刷新和上拉加载是有一定支持的，那就是app后缀文件里的windowe的参数enblePullDownRefresh和onReachBottomDistance。

在小程序里，用户顶部下拉是默认禁止的，我们需要把他设置为启用。

    "enablePullDownRefresh": true,//下拉刷新
    "onReachBottomDistance":10//上拉加载

另外注意四如果配置在app.json文件中，那么整个程序都可以下拉刷新。如果写在具体页面的.json文件中，那么就是对应的页面，可以下拉刷新。

同下拉刷新一样，官方文档中并没有很详细的介绍，经测试发现，上拉回调的接口并不需要额外的配置直接在页面滑动到底部时就能拿到回调。

设置enablePullDownRefresh后会触发js文件中的onPullDownRefresh方法，你可以在里面做要做的事情，初始化数据后，最后执行wx.stopPullDownRefresh()，将下拉关闭。

而设置onReachBottom后会触发js文件中的DistanceonReachBottom方法，操作你想做的。

实例：

const app = getApp()
var page = 1;
var isfinish = false;//加载完毕

function loadmore(that) {
  if (isfinish) return;

  wx.showLoading({
    title: '正在加载中...',
  })

  wx.request({
    url: "这不是你的借口",
    data: {
      page: page,
      condition: that.data.condition//查询
    },

    success: (res) => {
      wx.hideLoading();
      if (res.data.data.length > 0) {
        var list = that.data.data;
        for (var i = 0; i < res.data.data.length; i++) {
          list.push(res.data.data[i]);
        }
        that.setData({ data: list });
        page++;

      } else {
        isfinish = true;
      }
      wx.stopPullDownRefresh();
    }
  })
}

onPullDownRefresh: function () {
    page = 1;
    isfinish = false;
    this.setData({ data: [] });
    loadmore(this);
  },

  onReachBottom: function () {
    var that = this;
    loadmore(that);
  },