快捷導(dǎo)航

Uniapp實(shí)現(xiàn)下拉刷新的三種方式

更新時(shí)間：2025年02月17日 09:58:39 作者：天下代碼客

在小程序、h5等地方中,常常會(huì)用到下拉刷新這個(gè)功能,今天來(lái)講解實(shí)現(xiàn)這個(gè)功能的三種方式：全局下拉刷新,組件局部下拉刷新,嵌套組件下拉刷新,,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下

全局下拉刷新

這個(gè)方式簡(jiǎn)單，性能佳，最推薦，以下為步驟：

配置pages.json（在需要該功能的頁(yè)面設(shè)置對(duì)應(yīng)屬性）

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

在頁(yè)面中監(jiān)聽(tīng)下拉刷新時(shí)間（使用onPullDownRefresh生命周期函數(shù)）

<template>
    <view>
        <!-- 頁(yè)面內(nèi)容 -->
    </view>
</template>
 
<script>
export default {
    onPullDownRefresh() {
        // 模擬異步請(qǐng)求數(shù)據(jù)
        setTimeout(() => {
            // 這里可以編寫(xiě)刷新數(shù)據(jù)的邏輯，比如重新請(qǐng)求接口獲取最新數(shù)據(jù)
            console.log('下拉刷新完成');
            // 停止下拉刷新動(dòng)畫(huà)
            uni.stopPullDownRefresh();
        }, 2000);
    }
};
</script>

scroll-view 組件局部下拉刷新

在scroll-view 組件中有自定義下拉刷新的屬性以及相關(guān)方法可以直接使用，但是性能不如全局下拉刷新，且scroll-view 組件停止下拉刷新的方法可能有兼容問(wèn)題，會(huì)使用不了，此時(shí)可以用refressher-triggered屬性控制下拉刷新的狀態(tài)。
注意：scroll-view是區(qū)域滾動(dòng)，不會(huì)觸發(fā)頁(yè)面滾動(dòng)，無(wú)法觸發(fā)pages.json配置的下拉刷新、頁(yè)面觸底o(hù)nReachBottomDistance、titleNView的transparent透明漸變。

使用示例

<template>
    <scroll-view
        scroll-y
        refresher-enabled
        @refresherrefresh="onRefresh"
        @refresherrestore="onRestore"
        @refresherabort="onAbort"
    >
        <!-- 滾動(dòng)內(nèi)容 -->
        <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() {
            // 模擬異步請(qǐng)求數(shù)據(jù)
            setTimeout(() => {
                // 這里可以編寫(xiě)刷新數(shù)據(jù)的邏輯，比如重新請(qǐng)求接口獲取最新數(shù)據(jù)
                console.log('局部下拉刷新完成');
                // 停止下拉刷新動(dòng)畫(huà)
                this.$refs.scrollViewRef.finishPullToRefresh();
            }, 2000);
        },
        onRestore() {
            console.log('下拉刷新被復(fù)位');
        },
        onAbort() {
            console.log('下拉刷新被中止');
        }
    }
};
</script>

嵌套組件中的下拉刷新

場(chǎng)景：需要在子組件觸發(fā)下拉刷新功能，但是在pages.json中只能配置父頁(yè)面的下拉刷新屬性

父組件配置全局下拉刷新

在page.json中為父頁(yè)面配置enablePullDownRefresh為true，并在父組件的onPullDownRefresh生命周期函數(shù)中調(diào)用子組件的刷新方法。

<template>
    <view>
        <!-- 其他內(nèi)容 -->
        <child-component ref="childRef"></child-component>
    </view>
</template>
 
<script>
import ChildComponent from './ChildComponent.vue';
 
export default {
    components: {
        ChildComponent
    },
    onPullDownRefresh() {
        console.log('父頁(yè)面觸發(fā)下拉刷新');
        // 調(diào)用子組件的刷新方法
        this.$refs.childRef.refreshData().then(() => {
            // 停止下拉刷新動(dòng)畫(huà)
            uni.stopPullDownRefresh();
        }).catch((error) => {
            console.error('刷新數(shù)據(jù)出錯(cuò):', error);
            uni.stopPullDownRefresh();
        });
    }
};
</script>

子組件定義刷新方法

<template>
    <!-- 子組件內(nèi)容 -->
</template>
 
<script>
export default {
    methods: {
        async refreshData() {
            console.log('子組件開(kāi)始刷新數(shù)據(jù)');
            // 這里編寫(xiě)刷新數(shù)據(jù)的邏輯，比如重新請(qǐng)求接口獲取最新數(shù)據(jù)
            try {
                // 調(diào)用獲取消息的方法
                await this.getData();
                console.log('子組件數(shù)據(jù)刷新完成');
            } catch (error) {
                console.error('子組件刷新數(shù)據(jù)出錯(cuò):', error);
                throw error;
            }
        },
        // 其他方法...
    }
};
</script>

到此這篇關(guān)于Uniapp實(shí)現(xiàn)下拉刷新的三種方式的文章就介紹到這了,更多相關(guān)Uniapp下拉刷新內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: