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 文件中，展示数据列表：

4. 停止刷新动画

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

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

上一篇：微信小程序怎么实现地图定位授权？

下一篇：微信小程序原生开发微信支付全流程教程