uni-app 列表异步数据的下拉加载

发布于 1周前 作者 phonegap100 来自 Uni-App

uni-app 列表异步数据的下拉加载

列表下拉加载和上拉加载

列表下拉加载和上拉加载,ajax请求的数据,上拉一下请求第二页的数据,其页面上显示的是第一页和第二页的数据,之前官方出了一个list的demo,但是不实用,希望修改一下。。。

1 回复

在处理uni-app中的列表异步数据下拉加载时,我们通常使用onReachBottom生命周期函数来实现这一功能。这个函数会在页面滚动到底部时触发,非常适合用来加载更多数据。以下是一个简单的代码示例,展示了如何实现这一功能。

首先,我们需要在页面的script部分定义数据和加载函数:

<script>
export default {
    data() {
        return {
            list: [], // 用于存储列表数据
            page: 1, // 当前页码
            loading: false, // 加载状态
            hasMore: true // 是否有更多数据
        };
    },
    methods: {
        // 模拟异步加载数据
        async loadMoreData() {
            if (this.loading || !this.hasMore) return;
            this.loading = true;
            try {
                // 假设我们的API接受page和size参数
                const response = await uni.request({
                    url: 'https://api.example.com/getData',
                    method: 'GET',
                    data: {
                        page: this.page,
                        size: 10
                    }
                });
                const newData = response.data.items;
                if (newData.length === 0) {
                    this.hasMore = false;
                } else {
                    this.list = [...this.list, ...newData];
                    this.page += 1;
                }
            } catch (error) {
                console.error('加载数据失败:', error);
            } finally {
                this.loading = false;
            }
        },
        // 页面滚动到底部时触发
        onReachBottom() {
            if (this.hasMore) {
                this.loadMoreData();
            }
        }
    },
    onLoad() {
        // 页面加载时初次加载数据
        this.loadMoreData();
    }
};
</script>

template部分,我们可以简单地渲染这个列表:

<template>
    <view>
        <scroll-view scroll-y="true" style="height: 100vh;">
            <view v-for="(item, index) in list" :key="index">
                {{ item.name }}
            </view>
            <view v-if="loading">加载中...</view>
            <view v-if="!hasMore && list.length > 0">没有更多数据了</view>
        </scroll-view>
    </view>
</template>

这个示例展示了如何使用onReachBottom生命周期函数来处理列表的下拉加载,并在加载过程中显示加载状态。注意,在实际应用中,你可能需要根据API的具体返回格式和前端框架的约定来调整代码。此外,为了避免频繁请求,你可能还需要添加防抖或节流机制。

回到顶部