当前位置：首页 > news >正文

uni_app实现下拉刷新

news 来源：原创 2025/6/8 18:23:35

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

首先，你需要在页面的 pages.json 文件中启用下拉刷新功能。

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

2. 在页面中监听下拉刷新事件

在页面的 .vue 文件中，你可以通过 onPullDownRefresh 生命周期函数来监听下拉刷新事件。

vue

<template>
  <view>
    <view v-for="(item, index) in list" :key="index">{{ item }}</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: ['Item 1', 'Item 2', 'Item 3']
    };
  },
  onPullDownRefresh() {
    console.log('下拉刷新触发');
    // 模拟数据加载
    setTimeout(() => {
      this.list = ['New Item 1', 'New Item 2', 'New Item 3'];
      uni.stopPullDownRefresh(); // 停止下拉刷新
    }, 2000);
  }
};
</script>

<style>

3. 停止下拉刷新

在数据加载完成后，你需要调用 uni.stopPullDownRefresh() 来停止下拉刷新的动画。

4. 自定义下拉刷新样式（可选）

如果你想要自定义下拉刷新的样式，可以使用 uni.setBackgroundTextStyle 和 uni.setBackgroundColor 来设置下拉刷新时的背景颜色和文字样式。

uni.setBackgroundTextStyle({
  textStyle: 'dark' // 下拉刷新时的文字样式，可选值：dark, light
});

uni.setBackgroundColor({
  backgroundColor: '#f8f8f8', // 下拉刷新时的背景颜色
  backgroundColorTop: '#f8f8f8', // 顶部背景颜色
  backgroundColorBottom: '#ffffff' // 底部背景颜色
});

5. 处理下拉刷新时的网络请求

通常，下拉刷新时会触发网络请求来获取最新数据。你可以在 onPullDownRefresh 中进行网络请求，并在请求完成后停止下拉刷新。

onPullDownRefresh() {
  this.fetchData().then(() => {
    uni.stopPullDownRefresh();
  });
},
methods: {
  fetchData() {
    return new Promise((resolve) => {
      setTimeout(() => {
        this.list = ['New Item 1', 'New Item 2', 'New Item 3'];
        resolve();
      }, 2000);
    });
  }
}