字节笔记本字节笔记本

大佬分享:微信小程序实现下拉刷新的多种方法

2023-07-25

微信小程序实现下拉刷新可通过内置API `enablePullDownRefresh` 或使用第三方插件 `miniprogram-pull-down-refresh`。

微信小程序实现下拉刷新有两种方法:

1. 使用 enablePullDownRefresh API

该方法是使用微信小程序自带的下拉刷新API。在需要下拉刷新的页面的 onPullDownRefresh 生命周期函数中执行相应的数据刷新操作。

实现步骤:

  1. 在需要下拉刷新的页面的 .json 文件中添加 "enablePullDownRefresh": true 配置项。

  2. 在该页面的 .js 文件中实现 onPullDownRefresh 生命周期函数,并在其中执行相应的数据刷新操作。

示例代码:

// index.json
{
  "enablePullDownRefresh": true
}
// index.js
Page({
  onPullDownRefresh() {
    console.log('下拉刷新');

    // 模拟数据加载
    setTimeout(() => {
      wx.stopPullDownRefresh();
    }, 2000);
  }
});

2. 使用第三方下拉刷新插件

使用第三方下拉刷新插件也是常用的一种方式,比如可以使用 miniprogram-pull-down-refresh 插件。该插件基于 scroll-view 组件实现下拉刷新功能。使用步骤:

  1. 下载并安装 miniprogram-pull-down-refresh 插件(可以直接在 app.json 中添加依赖,也可以通过 npm 安装)。

  2. 在需要下拉刷新的页面的 .wxml 文件中使用 scroll-view 组件,并在其中添加插件的 mp-refresh 属性。

  3. 在该页面的 .js 文件中实现 onPulling 生命周期函数,并在其中执行相应的数据刷新操作。

示例代码:

// index.json
{
  "usingComponents": {
    "scroll-view": "/miniprogram_npm/miniprogram-pull-down-refresh/miniprogram_dist/index"
  }
}
<!-- index.wxml -->
<scroll-view mp-refresh bindrefresh="onPulling">
  <!-- 内容区域 -->
</scroll-view>
// index.js
Page({
  onPulling() {
    console.log('下拉刷新');

    // 模拟数据加载
    setTimeout(() => {
      this.selectComponent('#scroll-view').doneRefresh();
    }, 2000);
  }
});

注意:使用第三方下拉刷新插件需要在相应的页面中使用该插件提供的组件,具体可以参考插件文档。