大佬分享:微信小程序实现下拉刷新的多种方法
2023-07-25
微信小程序实现下拉刷新可通过内置API `enablePullDownRefresh` 或使用第三方插件 `miniprogram-pull-down-refresh`。
微信小程序实现下拉刷新有两种方法:
1. 使用 enablePullDownRefresh
API
该方法是使用微信小程序自带的下拉刷新API。在需要下拉刷新的页面的 onPullDownRefresh
生命周期函数中执行相应的数据刷新操作。
实现步骤:
-
在需要下拉刷新的页面的
.json
文件中添加"enablePullDownRefresh": true
配置项。 -
在该页面的
.js
文件中实现onPullDownRefresh
生命周期函数,并在其中执行相应的数据刷新操作。
示例代码:
// index.json { "enablePullDownRefresh": true }
// index.js Page({ onPullDownRefresh() { console.log('下拉刷新'); // 模拟数据加载 setTimeout(() => { wx.stopPullDownRefresh(); }, 2000); } });
2. 使用第三方下拉刷新插件
使用第三方下拉刷新插件也是常用的一种方式,比如可以使用 miniprogram-pull-down-refresh
插件。该插件基于 scroll-view
组件实现下拉刷新功能。使用步骤:
-
下载并安装
miniprogram-pull-down-refresh
插件(可以直接在 app.json 中添加依赖,也可以通过 npm 安装)。 -
在需要下拉刷新的页面的
.wxml
文件中使用scroll-view
组件,并在其中添加插件的mp-refresh
属性。 -
在该页面的
.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); } });
注意:使用第三方下拉刷新插件需要在相应的页面中使用该插件提供的组件,具体可以参考插件文档。