uniapp上拉加载更多

简介: uniapp上拉加载更多

最近在用uniapp写商城,遇到了需求,需要上拉加载更多数据:

首先先在data里面把需要的数据写上

data() {
   return { 
      pageNum: 1,
      hasMore: true,
      dataEnd: false,
   }
}

然后监听onReachBottom事件,这个是和data同级的

data() {
   return { 
      pageNum: 1, //请求第几页,默认为第一页
      hasMore: true, //判断有没有数据
   }
},
onReachBottom() {
            this.handleTolower();
},

最后写方法

async getLIst() {
                uni.showLoading({
                    title: '加载中'
                });
                let da = await this.$myRequest({
                    url: 'index/goods/listGoodsByMerchantId',
                    data: {
                        pageNum: this.pageNum,
                        pageSize: 5,
                        merchantId: this.zzbb
                    },
                })
                setTimeout(function() {
                    uni.hideLoading();
                }, 400);
                if (da.data.page.dataList.length == 0) {
                    this.hasMore = false;
                    this.dataEnd = true;
                    uni.showLoading({
                        title: '已经到底了'
                    })
                    setTimeout(function() {
                        uni.hideLoading();
                    }, 400)
                    return;
                }
                this.dataList = [...this.dataList, ...da.data.page.dataList];
                uni.showLoading({
                    title: '加载完成'
                })
                setTimeout(function() {
                    uni.hideLoading();
                }, 200);
            },
            handleTolower() {
                if (this.hasMore) {
                    this.pageNum = this.pageNum + 1;
                    this.getLIst();
                } else {
                    this.dataEnd = true;
                }
            },
目录
相关文章
|
JavaScript 数据处理
JS 取整,取余操作
JS 取整,取余操作
460 0
|
JavaScript 前端开发 小程序
JavaScript获取当前url路径
JavaScript获取当前url路径
222 0
|
移动开发 小程序
知识付费小程序注册时类目该如何选择?
知识付费小程序注册时类目该如何选择?
929 0
|
移动开发 小程序
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
uniapp自定义tabbar,中间凸起(支持H5、微信小程序)
|
3月前
|
Python
Python 值类型和引用类型:你真的懂了吗?
在 Python 中,变量赋值时为何有时影响其他变量?这与值类型和引用类型密切相关。值类型(如 int、str)复制时传递的是实际值,而引用类型(如 list、dict)传递的是内存地址。理解这一区别,有助于避免常见陷阱,如误改共享数据、默认参数陷阱等。本文通过内存图解和实例对比,深入解析赋值行为、函数参数传递机制,并提供避坑技巧,助你彻底掌握这一核心概念。
133 0
|
JavaScript
iview 表单有值却校验失败
iview 表单有值却校验失败
548 1
|
小程序
uni-app中vue3+setup实现下拉刷新、上拉加载更多效果
uni-app中vue3+setup实现下拉刷新、上拉加载更多效果
1412 2
|
人工智能 自然语言处理 数据挖掘
产品更新|宜搭AI 新增「智能数据分析」「智能表单」两项功能!
「宜搭AI」开放新一期功能:智能数据分析、智能表单,已支持在宜搭网页端使用体验。
878 0
产品更新|宜搭AI 新增「智能数据分析」「智能表单」两项功能!
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
1905 0
|
前端开发 JavaScript 搜索推荐
UniApp TabBar的巅峰之作:个性化导航的魅力
UniApp TabBar的巅峰之作:个性化导航的魅力
1036 0