【Uniapp】关于实现下拉刷新的三种方式

在小程序、h5等地方中，常常会用到下拉刷新这个功能，今天来讲解实现这个功能的三种方式：全局下拉刷新，组件局部下拉刷新，嵌套组件下拉刷新。

全局下拉刷新

这个方式简单，性能佳，最推荐，以下为步骤：

• 配置pages.json（在需要该功能的页面设置对应属性）

{"pages": [{"path": "pages/index/index","style": {"enablePullDownRefresh": true,// 下拉 loading 的样式，可选值为 'dark' 或 'light'"backgroundTextStyle": "dark"}}]
}

• 在页面中监听下拉刷新时间（使用onPullDownRefresh生命周期函数）

<template><view><!-- 页面内容 --></view>
</template><script>
export default {onPullDownRefresh() {// 模拟异步请求数据setTimeout(() => {// 这里可以编写刷新数据的逻辑，比如重新请求接口获取最新数据console.log('下拉刷新完成');// 停止下拉刷新动画uni.stopPullDownRefresh();}, 2000);}
};
</script>

scroll-view 组件局部下拉刷新

• 在scroll-view 组件中有自定义下拉刷新的属性以及相关方法可以直接使用，但是性能不如全局下拉刷新，且scroll-view 组件停止下拉刷新的方法可能有兼容问题，会使用不了，此时可以用refressher-triggered属性控制下拉刷新的状态。
• 注意：scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。

使用示例

<template><scroll-viewscroll-yrefresher-enabled@refresherrefresh="onRefresh"@refresherrestore="onRestore"@refresherabort="onAbort"><!-- 滚动内容 --><view v-for="item in list" :key="item.id">{{ item.name }}</view></scroll-view>
</template><script>
export default {data() {return {list: [{ id: 1, name: 'Item 1' },{ id: 2, name: 'Item 2' },{ id: 3, name: 'Item 3' }]};},methods: {onRefresh() {// 模拟异步请求数据setTimeout(() => {// 这里可以编写刷新数据的逻辑，比如重新请求接口获取最新数据console.log('局部下拉刷新完成');// 停止下拉刷新动画this.$refs.scrollViewRef.finishPullToRefresh();}, 2000);},onRestore() {console.log('下拉刷新被复位');},onAbort() {console.log('下拉刷新被中止');}}
};
</script>

嵌套组件中的下拉刷新

场景：需要在子组件触发下拉刷新功能，但是在pages.json中只能配置父页面的下拉刷新属性

• 父组件配置全局下拉刷新

在page.json中为父页面配置enablePullDownRefresh为true，并在父组件的onPullDownRefresh生命周期函数中调用子组件的刷新方法。

<template><view><!-- 其他内容 --><child-component ref="childRef"></child-component></view>
</template><script>
import ChildComponent from './ChildComponent.vue';export default {components: {ChildComponent},onPullDownRefresh() {console.log('父页面触发下拉刷新');// 调用子组件的刷新方法this.$refs.childRef.refreshData().then(() => {// 停止下拉刷新动画uni.stopPullDownRefresh();}).catch((error) => {console.error('刷新数据出错:', error);uni.stopPullDownRefresh();});}
};
</script>

• 子组件定义刷新方法

<template><!-- 子组件内容 -->
</template><script>
export default {methods: {async refreshData() {console.log('子组件开始刷新数据');// 这里编写刷新数据的逻辑，比如重新请求接口获取最新数据try {// 调用获取消息的方法await this.getData();console.log('子组件数据刷新完成');} catch (error) {console.error('子组件刷新数据出错:', error);throw error;}},// 其他方法...}
};
</script>

---

欢迎指正！