如何使用 onPullDownRefresh 监听用户下拉动作？

推荐答案

// www.javascriptcn.com code example
// 在页面的 .json 文件中启用下拉刷新功能
{
  "enablePullDownRefresh": true
}

// 在页面的 .js 文件中监听下拉刷新事件
Page({
  onPullDownRefresh() {
    // 在这里处理下拉刷新的逻辑
    console.log('用户下拉刷新');

    // 模拟异步操作
    setTimeout(() => {
      // 停止下拉刷新动画
      wx.stopPullDownRefresh();
    }, 2000);
  }
});

本题详细解读

1. 启用下拉刷新功能

在微信小程序中，首先需要在页面的 .json 配置文件中启用下拉刷新功能。通过设置 enablePullDownRefresh 为 true，页面将支持下拉刷新操作。

{
  "enablePullDownRefresh": true
}

2. 监听下拉刷新事件

在页面的 .js 文件中，可以通过 onPullDownRefresh 生命周期函数来监听用户的下拉刷新动作。当用户下拉页面时，onPullDownRefresh 函数会被触发。

// www.javascriptcn.com code example
Page({
  onPullDownRefresh() {
    // 在这里处理下拉刷新的逻辑
    console.log('用户下拉刷新');

    // 模拟异步操作
    setTimeout(() => {
      // 停止下拉刷新动画
      wx.stopPullDownRefresh();
    }, 2000);
  }
});

3. 停止下拉刷新动画

在 onPullDownRefresh 函数中，通常会执行一些异步操作（如请求数据）。当这些操作完成后，需要调用 wx.stopPullDownRefresh() 来停止下拉刷新的加载动画。

wx.stopPullDownRefresh();

4. 注意事项

• onPullDownRefresh 只有在页面配置中启用了 enablePullDownRefresh 时才会生效。
• 下拉刷新操作会触发页面的重新渲染，因此需要确保在刷新完成后及时停止动画，以避免用户体验不佳。