uni-app 原生下拉刷新组件

在uni-app中，原生下拉刷新（Pull-to-Refresh）功能可以通过集成官方提供的uni.createPullRefresh API来实现。下面是一个简单的代码示例，展示如何在uni-app中实现下拉刷新功能。

1. 在页面配置文件中启用下拉刷新

首先，在你的页面配置文件（如pages.json）中，确保目标页面的style对象中启用了下拉刷新：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true  // 启用下拉刷新
      }
    }
  ]
}

2. 在页面脚本中实现下拉刷新逻辑

接下来，在你的页面脚本文件（如pages/index/index.vue）中，使用uni.createPullRefresh API来创建和管理下拉刷新：

<template>
  <view>
    <scroll-view scroll-y="true" style="height: 100vh;">
      <!-- 页面内容 -->
      <view v-for="(item, index) in items" :key="index">{{ item }}</view>
    </scroll-view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3'], // 示例数据
      pullRefresh: null // 存储下拉刷新实例
    };
  },
  onLoad() {
    this.initPullRefresh();
  },
  methods: {
    initPullRefresh() {
      this.pullRefresh = uni.createPullRefresh({
        trigger: 50, // 触发下拉刷新的滚动距离
        success: (res) => {
          console.log('触发下拉刷新');
          this.refreshData();
        },
        restore: (res) => {
          console.log('下拉刷新恢复');
        }
      });
    },
    refreshData() {
      // 模拟异步数据更新
      setTimeout(() => {
        this.items = ['New Item 1', 'New Item 2', 'New Item 3'];
        this.pullRefresh.stop(); // 停止下拉刷新状态
        uni.showToast({
          title: '刷新成功',
          icon: 'success'
        });
      }, 1500);
    }
  }
};
</script>

3. 注意事项

• 确保你的页面内容在scroll-view组件内，并且设置了scroll-y="true"。
• uni.createPullRefresh中的trigger参数表示触发下拉刷新的滚动距离，可以根据需要调整。
• 在数据更新完成后，记得调用this.pullRefresh.stop()来停止下拉刷新状态。

通过以上步骤，你就可以在uni-app中实现一个基本的下拉刷新功能。根据具体需求，你可以进一步扩展和优化这个示例。