uniapp微信小程序怎么实现数据页面下拉刷新

在 UniApp 中实现页面下拉刷新功能非常简单，UniApp 提供了内置的下拉刷新组件和 API，支持在 H5、小程序、App 等多个平台使用。

实现思路

启用下拉刷新：在页面的配置中启用下拉刷新功能。

监听下拉刷新事件：使用 onPullDownRefresh 生命周期函数监听下拉刷新事件。

执行刷新逻辑：在下拉刷新时执行数据加载或更新操作。

停止刷新动画：使用 uni.stopPullDownRefresh 停止刷新动画。

1. 启用下拉刷新

在页面的 pages.json 文件中，为需要下拉刷新的页面配置 enablePullDownRefresh：

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

2. 监听下拉刷新事件

在页面的 JS 文件中，使用 onPullDownRefresh 生命周期函数监听下拉刷新事件：

export default {
  data() {
    return {
      list: [], // 示例数据列表
    };
  },
  onLoad() {
    this.loadData(); // 初始化加载数据
  },
  onPullDownRefresh() {
    console.log('下拉刷新触发');
    this.loadData(); // 重新加载数据
  },
  methods: {
    // 模拟数据加载
    loadData() {
      // 模拟网络请求
      setTimeout(() => {
        this.list = [1, 2, 3, 4, 5]; // 更新数据
        uni.stopPullDownRefresh(); // 停止刷新动画
      }, 1000);
    },
  },
};

3. 页面模板

在页面的 WXML 文件中，展示数据列表：

<template>
  <view>
    <view v-for="(item, index) in list" :key="index" class="item">
      {{ item }}
    </view v-for="(item, index) in list" :key="index" class="item"></view>
   
</template>
 
<style>
.item {
  padding: 20px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
</style>

4. 停止刷新动画

在数据加载完成后，调用 uni.stopPullDownRefresh 停止刷新动画：

methods: {
  loadData() {
    setTimeout(() => {
      this.list = [1, 2, 3, 4, 5]; // 更新数据
      uni.stopPullDownRefresh(); // 停止刷新动画
    }, 1000);
  },
},