小程序上拉刷新，轻松实现轻松加载更多

2023-10-24 11:47:18

上拉刷新，又称上拉触底，是指当用户在浏览列表时，向下滚动到列表的底部时，触发自动加载更多内容的操作。小程序的上拉刷新功能非常强大，它可以帮助用户轻松加载更多内容，从而提升用户体验。

1. 如何启用上拉刷新？

启用上拉刷新非常简单，只需要在小程序的 app.json 文件中，找到 enablePullDownRefresh 配置项，并将它的值设置为 true 即可。

{
  "enablePullDownRefresh": true
}

2. 如何配置上拉刷新的距离？

小程序中，上拉刷新的距离是可以配置的。开发者可以通过在 app.json 文件中，找到 reachBottomDistance 配置项，并为它指定一个数值来配置上拉刷新的距离。单位是 px。

{
  "enablePullDownRefresh": true,
  "reachBottomDistance": 50
}

上例中，当用户向下滚动到列表底部，距离底部还有 50px 时，就会触发上拉刷新。

3. 如何监听上拉刷新的回调事件？

当上拉刷新被触发时，小程序会触发一个名为 onReachBottom 的回调事件。开发者可以在小程序的 pages.json 文件中，找到要监听上拉刷新的页面，并在它的 usingComponents 字段中，添加 pull-down-refresh 组件。

{
  "pages": [
    {
      "path": "pages/index/index",
      "usingComponents": {
        "pull-down-refresh": "path/to/pull-down-refresh"
      }
    }
  ]
}

然后，在 pages/index/index.js 文件中，监听 onReachBottom 事件，并执行相应的逻辑。

Page({
  onReachBottom() {
    console.log('上拉刷新被触发了');
  }
});

4. 上拉刷新的小demo

下面是一个简单的上拉刷新的小demo，可以帮助开发者快速掌握上拉刷新的使用方法。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue@3"></script>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          list: [1, 2, 3, 4, 5]
        }
      },
      methods: {
        onReachBottom() {
          console.log('上拉刷新被触发了');
          setTimeout(() => {
            this.list.push(6, 7, 8, 9, 10);
          }, 1000);
        }
      }
    });
    app.use(VuePullToRefresh, {
      enablePullDownRefresh: false,
      pullDownRefresh: {
        stop: true
      },
      reachBottomDistance: 50
    });
    app.mount('#app');
  </script>
</body>
</html>