uniapp下拉刷新和上拉加载的实现

顽强的小豆子

已于 2022-06-23 09:34:03 修改

阅读量863

点赞数 1

文章标签：前端 javascript vue.js

于 2022-06-23 09:31:37 首次发布

本文链接：https://blog.csdn.net/qiuyushuofeng/article/details/125420842

版权

本文详细介绍了在小程序中实现下拉刷新和上拉加载的步骤。首先在pages.json文件的globalStyle中开启下拉刷新功能，然后在goods.vue页面中定义onPullDownRefresh函数进行刷新逻辑，并在onReachBottom中处理上拉加载更多数据的逻辑。通过这种方式，实现了商品列表的动态更新和无限滚动加载。

摘要由CSDN通过智能技术生成

下拉刷新的实现步骤（代码解释详细，通俗易懂）

1.pages.json文件中，globalStyle里面开启下拉刷新，属性为true

{

    "pages": [

        {

        "path": "pages/index/index"

        },

        {

            "path": "pages/search/search"

        },

        {

            "path": "pages/cart/cart"

        },

        {

            "path": "pages/member/member"

        }

        ,{

            "path" : "pages/goods/goods",

            "style" :                                                                                    

            {

                "navigationBarTitleText": ""

                // "enablePullDownRefresh": true

            }

            

        }

    ],

    "globalStyle": {

        "navigationBarTextStyle": "white",

        "navigationBarTitleText": "多抓鱼",

        "navigationBarBackgroundColor": "#003153",

        "enablePullDownRefresh": true,

        "backgroundColor": "#F8F8F8",

        "app-plus": {

            "background": "#efeff4"

        }

    },

    "tabBar": {

        //列表的顺序决定图标的顺序

        "list": [

            {

                "pagePath":"pages/index/index",

                "text":"首页",

                "iconPath":"static/icon/home.png",

                "selectedIconPath":"static/icon/home-active.png"

            },

            {

                "pagePath":"pages/search/search",

                "text":"搜索",

                "iconPath":"static/icon/news.png",

                "selectedIconPath":"static/icon/news-active.png"

            },

            {

                "pagePath":"pages/cart/cart",

                "text":"购物车",

                "iconPath":"static/icon/cart.png",

                "selectedIconPath":"static/icon/cart-active.png"

            },

            {

                "pagePath":"pages/member/member",

                "text":"会员",

                "iconPath":"static/icon/member.png",

                "selectedIconPath":"static/icon/member-active.png"

            }

        ]


    }


}

2.onPullDownRefresh是页面周期函数，下拉操作会触发该函数

goods.vue中

methods: {

            async getGoodsInfo(callback){

                const res = await this.$myRequest({

                    url: "/goods/search?pageIndex="+this.pageIndex,

                    method: 'get',

                    

                })

                //对象扩展运算符，将两个数组合并成一个

                this.goods = [...this.goods,...res.data.message.goods];

                this.total = res.data.message.total;

                this.pagenum = res.data.message.pagenum;

                console.log("total",this.goods.length)

                //传入回调函数就执行

                callback && callback()

            }

        },

onPullDownRefresh() {

                    console.log('下拉刷新了')

                    this.pageindex = 1

                    this.goods = []

                    this.flag = false

                    setTimeout(()=>{

                      this.getGoodsInfo(()=>{

                            uni.stopPullDownRefresh()

                        })    

                    },1000)

        }

上拉加载

页面周期函数，页面拉到底自动触发。

methods: {

            async getGoodsInfo(callback){

                const res = await this.$myRequest({

                    url: "/goods/search?pageIndex="+this.pageIndex,

                    method: 'get',

                    

                })

                this.goods = [...this.goods,...res.data.message.goods];

                this.total = res.data.message.total;

                this.pagenum = res.data.message.pagenum;

                console.log("total",this.goods.length)

                callback && callback()

            }

        },

onReachBottom() {

            if(this.goods.lenth < 20*this.pageIndex){

                return this.flag = true;    

            }

            this.pageIndex++;

            this.getGoodsInfo();

        },