记录分页懒加载功能,数据列表,每次触底实现分页懒加载

1. 引用uview加载更多标签页面中定义 <u-loadmore :status="status" /> data中定义 status:'nomore' 没有更多状态,、定义默认分页为1,current：1

2. 触底方法,每次触底分页+1，状态 status 变为加载中

onReachBottom() {
           this.status = 'loading' // status 变为加载中
           this.current++ //
           this.findAllList() // 回调接口
       },

3.接口中去处理逻辑,以我的接口数据为例

findAllList(){ //询价列表
               this.$tools.axiosFromToken('POST','gdiu/bill/ListBySurveyor',{
                   type:this.type,
                   current:this.current,
                   size:3,//默认3条
               },'加载中~').then(res=>{
                   if(res.code==200){
                       if(res.data.length == 0 && this.current == 1){ //如果分页为1 且没有数据
                           this.list = [] //数据置空
                           return //阻止下一步
                       }
                       if(this.current==1&&res.data.length!= 0 ){ //如果分页为1 且数据为为空
                           this.list = res.data //显示已有的数据
                       }else{ //否则,分页不为1 ++时数据没有时
                           setTimeout(()=>{ //定时器使懒加载更明显
                           this.status = 'nomore' //状态变为没有更多
                           this.list = [...this.list, ...res.data]; //每次分页的数据合并
                           },500)
                       }
                   }else{
                       this.$tools.showtt(res.msg)
                   }
               })
           },

4. 注意：如果有tab切换时，要将分页默认设为 1

记录分页懒加载功能,数据列表,每次触底实现分页懒加载相关推荐

利用交叉观察者这个小宝贝儿，轻松实现懒加载、吸顶、触底
IntersectionObserver 接口,提供了一种异步观察目标元素与其祖先元素或顶级文档视窗( viewport ) 交叉状态的方法,祖先元素与视窗( viewport )被称为根( ro ...
小程序下拉刷新上拉触底加载数据
1. 下拉刷新下拉刷新主要用到「onPullDownRefresh」函数,我们在新建目录然后新建page之后在wxml文件中会自动生成很多生命周期函数,其中就会生成「onPullDownRefres ...
vue 滑动加载列表 php,通过原生vue添加滚动加载更多功能
这篇文章主要介绍了通过原生vue添加滚动加载更多功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 vue中添加滚动加载更多,因为是单页面所以需要在 ...
列表项按需加载 v-infinite-scroll 滚动条触底无效解决方案
问题背景后台返回的分页数据需要实现滚动条触底加载下一页, 用了element-ui 的 v-infinite-scroll 指令来实现.但是发现在某一分辨率下, 滚动条触底时未触发加载方法. 解决方 ...
autoware加载地图数据与使用rosbag包建图（三）
autoware加载地图数据(三) 介绍如何为autoware加载地图数据启动autoware $ cd ~/autoware.ai $ source install/setup.bash $ ro ...
高德地图开发（二）加载瓦片数据
官方Demo中给我们提供了加载在线瓦片数据的功能. 我们在上一节的基础上进行演示.话不多说先上图. 布局文件如下: <RelativeLayout xmlns:android="htt ...
滚动条触底加载下一页数据
页面再加载当我们使用返回数据量大的接口的时候,如果全部申请回来,就会影响项目的性能,滚动条触底再加载下一页数据能确保用户讲页面拉到页面底部的时候再去申请下一页的数据实现原理找到滚动条触底事件使 ...
Tensorflow2.* 加载和预处理数据之用 tf.data 加载 Numpy数据(2)
Tensorflow2.* 机器学习基础知识篇: 对服装图像进行分类使用Tensorflow Hub对未处理的电影评论数据集IMDB进行分类 Keras 机器学习基础知识之对预处理的电影评论文本分类 ...
Cesium基础知识-加载json数据
viewer = new Cesium.Viewer('cesiumContainer'); //加载json数据生成线 function CreateLineFromJson(params) { / ...

记录分页懒加载功能,数据列表,每次触底实现分页懒加载

记录分页懒加载功能,数据列表,每次触底实现分页懒加载相关推荐

最新文章

热门文章