首页 > 网络编程 > JavaScript > javascript技巧 > Uniapp下拉刷新

Uniapp实现下拉刷新的三种方式

2025-02-17 09:58:40 作者：天下代码客

在小程序、h5等地方中,常常会用到下拉刷新这个功能,今天来讲解实现这个功能的三种方式：全局下拉刷新,组件局部下拉刷新,嵌套组件下拉刷新,,文中通过代码示例讲解的非常详细,需要的朋友可以参考下

在小程序、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-view
        scroll-y
        refresher-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>

到此这篇关于Uniapp实现下拉刷新的三种方式的文章就介绍到这了,更多相关Uniapp下拉刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！