uni-app x开发商城系统，实现上下拉动，动态加载数据

一、概述

上一篇文章，已经实现了商品列表组件封装以及使用。

但是商品列表页面，还需要实现，上下拉动，动态加载数据。

效果如下：

二、onReachBottom

onReachBottom是微信小程序页面生命周期中的回调函数，用于检测页面是否滚动到最底部，并在触底时触发加载更多内容。

修改 pages/goods/goods.uvue文件

在methods:{}下面，增加onReachBottom

onReachBottom() {
    uni.showToast({
        title: '到底啦，没有更多内容啦'
    });
}

编译代码，重新运行，直接拉到最下面，就会出现提示，效果如下：

三、滑动加载

修改 pages/goods/goods.uvue文件，增加分页判断

完整代码如下：

<template>
    <view class="goods_list">
        <GoodsList :goods="goods"></GoodsList>
        <view class="is_over" v-if="flag">
            ---我是有底线的---
        </view>
    </view>
</template>

<script>
    import GoodsList from '../../components/goods-list/goods-list.uvue'
    export default {
        components: {
            GoodsList: GoodsList
        },
        data() {
            return {
                goods: [],
                pageindex: 1,
                flag: false
            }
        },
        onLoad() {
            this.get_goods()
        },
        methods: {
            // 获取商品列表数据
            async get_goods() {
                try {
                    const res = await this.$http.get('/api/getgoods?pageindex=' + this.pageindex, {})
                    // console.log("res", res)
                    // this.goods = res.message
                    this.goods = [...this.goods, ...res.message]
                } catch (err : any) {
                    uni.showToast({
                        title: '获取商品列表失败' + err.statusCode,
                    });
                }
            },
        },
        onReachBottom() {
            // 判断最后一页
            if (this.goods.length < this.pageindex * 10) {
                this.flag = true
                // uni.showToast({
                //     title: '到底啦，没有更多内容啦'
                // });
                return false
            } else {
                // 获取下一页数据
                this.pageindex++
                this.get_goods()
            }

        }
    }
</script>

<style lang="scss">
    .goods_list {
        background: #eee;
    }

    .is_over {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 28rpx;
    }
</style>

代码说明：

<template>，新增了一个view，用来提醒用户，到底了，已经是显示最后一页。

this.goods = [...this.goods, ...res.message]，把已有的 this.goods 数组和 res.message 数组合并成一个新的数组，然后重新赋值给 this.goods

什么意思呢，就是第1页时，this.goods有10条数据，第2页时，this.goods有20条数据，依次类推。

this.goods.length < this.pageindex * 10，这个判断条件，需要重点讲一下，有点不太好理解。

就如上面所说，每次滑动，分页数会一直加。那么this.goods的数据量就会变成，10，20，30等等。

但是到了最后一页呢，可能是43，51，69这种，非10整除的数量。

那么，当数据量，不能被10整除时，也就是到了最后一页了。所以判断条件这里，用的是this.goods.length < this.pageindex * 10

编译代码，效果如下：

四、下拉刷新

onPullDownRefresh

onPullDownRefresh 是微信小程序和 uni-app中实现下拉刷新的页面事件处理函数，用于监听用户下拉操作并触发数据刷新逻辑。

基础配置

1. 开启下拉刷新‌：在页面配置文件pages.json中添加 "enablePullDownRefresh":true

修改pages.json，只需要修改goods的配置

{
    "path": "pages/goods/goods",
    "style": {
        "navigationBarTitleText": "商品列表",
        "enablePullDownRefresh": true
    }
},

2‌.处理函数定义‌：在页面逻辑层（如 Page 对象中）定义 onPullDownRefresh 函数，实现刷新逻辑。 ‌

修改 pages/goods/goods.uvue文件，在onReachBottom(){}，下面新增一个函数

onPullDownRefresh() {
    console.log("下拉刷新了")
    this.pageindex = 1
    this.goods = []
    this.flag = false
    this.get_goods()
}

编译代码，重新运行。

从商品列表，向下拉，就会出现一个转圈的图标

但是有一个问题，这个转圈的图标，一直无法消失。

还需要调用uni.stopPullDownRefresh()，来处理图标，不显示。

那么什么时候调用呢？当然是调用api接口成功了，再调用。

再次修改 pages/goods/goods.uvue文件

完整代码如下：

<template>
    <view class="goods_list">
        <GoodsList :goods="goods"></GoodsList>
        <view class="is_over" v-if="flag">
            ---我是有底线的---
        </view>
    </view>
</template>

<script>
    import GoodsList from '../../components/goods-list/goods-list.uvue'
    export default {
        components: {
            GoodsList: GoodsList
        },
        data() {
            return {
                goods: [],
                pageindex: 1,
                flag: false
            }
        },
        onLoad() {
            this.get_goods()
        },
        methods: {
            // 获取商品列表数据
            async get_goods(callBack) {
                try {
                    const res = await this.$http.get('/api/getgoods?pageindex=' + this.pageindex, {})
                    // console.log("res", res)
                    // this.goods = res.message
                    this.goods = [...this.goods, ...res.message]
                    // callBack && callBack()
                    if (callBack) {
                        callBack();
                    }
                } catch (err : any) {
                    uni.showToast({
                        title: '获取商品列表失败' + err.statusCode,
                    });
                }
            },
        },
        onReachBottom() {
            // 判断最后一页
            if (this.goods.length < this.pageindex * 10) {
                this.flag = true
                // uni.showToast({
                //     title: '到底啦，没有更多内容啦'
                // });
                return false
            } else {
                // 获取下一页数据
                this.pageindex++
                this.get_goods()
            }
        },
        onPullDownRefresh() {
            console.log("下拉刷新了")
            this.pageindex = 1
            this.goods = []
            this.flag = false
            setTimeout(() => {
                this.get_goods(() => {
                    uni.stopPullDownRefresh()
                })
            }, 1000)
        }
    }
</script>

<style lang="scss">
    .goods_list {
        background: #eee;
    }

    .is_over {
        width: 100%;
        height: 50px;
        line-height: 50px;
        text-align: center;
        font-size: 28rpx;
    }
</style>

代码解释：

在onPullDownRefresh里面，定义了一个延迟执行代码的函数，1秒后，执行get_goods方法，执行成功后，再执行uni.stopPullDownRefresh()，用来关闭转圈的图标。

在get_goods里面，定义了一个callBack，这里面做了一个if判断。

当onLoad(){}里面执行get_goods方法时，直接跳过if判断。但是当onPullDownRefresh里面的延迟执行函数，执行get_goods，就会调用callBack，用来刷新结束通知

重新编译代码，效果如下：

posted @ 2025-10-17 18:23 肖祥阅读(39) 评论(0) 收藏举报

刷新页面返回顶部

肖祥