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 取整,取余操作
339 0
|
移动开发 小程序
知识付费小程序注册时类目该如何选择?
知识付费小程序注册时类目该如何选择?
810 0
|
JavaScript 前端开发 小程序
JavaScript获取当前url路径
JavaScript获取当前url路径
190 0
|
JavaScript
iview 表单有值却校验失败
iview 表单有值却校验失败
493 1
|
小程序
uni-app中vue3+setup实现下拉刷新、上拉加载更多效果
uni-app中vue3+setup实现下拉刷新、上拉加载更多效果
1302 2
|
JavaScript 前端开发
【前端web入门第一天】03 综合案例 个人简介与vue简介
该网页采用“从上到下,先整体再局部”的制作思路,逐步分析并编写代码实现个人简介页面。内容涵盖尤雨溪的背景、学习经历及主要成就,同时介绍其开发的Vue.js框架特点。代码结构清晰,注重细节处理,如使用快捷键提高效率,预留超链接位置等,确保最终效果符合预期。
228 7
|
人工智能 自然语言处理 数据挖掘
产品更新|宜搭AI 新增「智能数据分析」「智能表单」两项功能!
「宜搭AI」开放新一期功能:智能数据分析、智能表单,已支持在宜搭网页端使用体验。
792 0
产品更新|宜搭AI 新增「智能数据分析」「智能表单」两项功能!
|
前端开发 数据可视化 JavaScript
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
Echarts如何实现多图表缩放和自适应?附源码
|
前端开发 JavaScript 搜索推荐
UniApp TabBar的巅峰之作:个性化导航的魅力
UniApp TabBar的巅峰之作:个性化导航的魅力
887 0
Java系列之 For input string: ““
这篇文章讨论了Java中因尝试将空字符串转换为其它数据类型(如int)时出现的`For input string: ""`错误,并提供了通过非空检查来避免此错误的解决方法。

热门文章

最新文章