ps:loading finished onLoad 两个变量一个函数 ;

 async onLoad() {
console.log("onload");
// 异步更新数据
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
// 加载状态结束
this.page += 1;
const res = await getNewArtApi({
page: this.page,
limit: 10,
});
// console.log(res.data.list.data);
// 请求不到数据 return
if (res.data.list.data === 0) return (this.finished = true);
// 服务器没有数据了停止加载 不然会一直加载 造成服务器停滞
if (res.data.list.data.length < 10) this.finished = true;
this.newArtList = [...this.newArtList, ...res.data.list.data];
this.loading = false;
},

vant2 List 组件 下拉加载 onLoad的更多相关文章

  1. vue之vant组件下拉加载更多

    vant地址:https://youzan.github.io/vant/#/zh-CN/intro 基础用法 List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部 ...

  2. 使用谷歌提供的SwipeRefreshLayout下拉控件,并自定义实现下拉加载的功能

    package com.loaderman.swiperefreshdemo; import android.os.Bundle; import android.os.Handler; import ...

  3. 微信小程序实现上拉和下拉加载更多

    在上一篇文章中,我们知道了使用 scroll-view 可以实现上拉加载更多,但是由于 scroll-view 的限制,它无法实现下拉加载更多,这篇文章我们使用 view 组件来实现 上拉和下拉加载更 ...

  4. 集成iscroll 下拉加载更多 jquery插件

    一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...

  5. vux (scroller)上拉刷新、下拉加载更多

    1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX=true height="-170" :pulldown-conf ...

  6. 微信小程序中如何实现分页下拉加载?(附源码)

    转眼间坚持写教你微信小程序系列已经有十节系列课程了,每天的工作压力繁重,小女子也不知道自己还能坚持这样的系列教程多久.只希望每篇教程真的对大家有帮助.这节课我们要介绍的就是如何实现分页的下拉加载,我们 ...

  7. Vue自定义指令实现下拉加载:v-loadmore

    和methods平级: directives: { loadmore: {//自定义指令: 下拉加载 bind(el, binding) {    var p = 0;    var t = 0;  ...

  8. RecyclerView下拉加载集合越界问题

    问题描述 在做毕业设计app中遇到这样一个问题,使用RecyclerView进行下拉加载数据的时候,比如我每次让它加载5条数据,当服务器端数据总数刚好是5的倍数的时候,不会出现下拉加载数据集合越界的问 ...

  9. Flutter学习笔记(25)--ListView实现上拉刷新下拉加载

    如需转载,请注明出处:Flutter学习笔记(25)--ListView实现上拉刷新下拉加载 前面我们有写过ListView的使用:Flutter学习笔记(12)--列表组件,当列表的数据非常多时,需 ...

  10. flutter 下拉加载+下拉加载

    功能: 1.下拉加载 2.上拉加载 3.显示加载图标 4.更新列表数据,隐藏加载图标 flutter库: flutter_spinkit: ^3.1.0 加载图标 其他:加载列表需要列表,基于上一节的 ...

随机推荐

  1. 【郝斌C ST】02

    自学视频<郝斌C语言自学教程> 10: https://www.bilibili.com/video/BV1os411h77o C语言大纲 - 1.简介 - 2.基本编译知识 - 3.数据 ...

  2. 【Git】01 下载安装(Windows)

    Git 官网地址:[点我访问] https://git-scm.com/ 点击这个电脑自动识别操作系统与系统位数 开始安装 安装的目录不要有中文就行[最好也不要有空格] 算了,直接全选[小孩子才做选择 ...

  3. 【Shiro】03 ini认证实现

    [基本概念] 1.身份验证 即在应用中谁能证明他就是他本人. 一般提供如他们的身份ID 一些标识信息来表明他就是他本人,如提供身份证,用户名/密码来证明. 在 shiro 中,用户需要提供princi ...

  4. 人机协同的半自动人形机器人 —— Covariant公司的RFM-1机器人

    Covariant公司的RFM-1机器人实现了一个极为有意思的功能,那就是在机器人执行任务的过程中如果遇到无法处理的情况下就会停止下来然后等待人类的语言指示,比如:夹具向上移动2cm,更换更大型号的夹 ...

  5. batch normalization的multi-GPU版本该怎么实现? 【Tensorflow 分布式PS/Worker模式下异步更新的情况】

    最近由于实验室有了个AI计算平台,于是研究了些分布式和单机多GPU的深度学习代码,于是遇到了下面的讨论: https://www.zhihu.com/question/59321480/answer/ ...

  6. 如何为anaconda配置动态链接库——ERROR: compiler_compat/ld: cannot find

    现在为python编译lib库的环境主要是使用anaconda,而之前往往都是使用自编译python环境,然后使用Linux的系统lib环境,但是现在由于都是使用anaconda环境来编译python ...

  7. mongo变更流使用及windows下副本集五分钟搭建

    mongodb的变更流解释: 变更流(Change Streams)允许应用程序访问实时数据变更,从而避免事先手动追踪  oplog 的复杂性和风险.应用程序可使用变更流来订阅针对单个集合.数据库或整 ...

  8. 一款.NET开发的AI无损放大工具

    前言 今天大姚给大家分享一款由.NET开源(GPL-3.0 license).基于腾讯ARC Lab提供的Real-ESRGAN模型开发的AI无损放大工具:AI-Lossless-Zoomer. Re ...

  9. Zabbix创建模板(templates)及监控项(item)

    Zabbix监控--Zabbix创建模板(templates)及监控项(item) 生产环境中,有一个简单的原则,那就是无监控不上线,监控系统开源方案中,zabbix也算不错的选择.由于其系统接口的开 ...

  10. idea启动项目发现端口被占用!!!导致启动不起来

    windows端口被占用 netstat -ano |findstr 端口号 任务管理器详细信息 PID排序找到刚才查到的 右键结束 原因: idea被异常终止导致tomcat没死