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. 【爬虫】Java爬取KFC全国门店信息

    官网地址: http://www.kfc.com.cn/kfccda/storelist/index.aspx 基础库 <dependencies> <dependency> ...

  2. 【Tutorial C】04 基本输入输出

    输出单个字符 putchar('a'); // 字符输出函数,其功能是在终端(显示器)输出单个字符. putchar('\n'); // 支持转义换行 putchar(77); // 可以直接注入AS ...

  3. 甄嬛霸气照 —— Chinese Queen

  4. 《A Palestinian Woman Embraces the Body of Her Niece》—— 4月19日报道 2024年世界新闻摄影大赛结果在荷兰出炉,一张巴勒斯坦妇女在加沙地带抱着被杀害的五岁侄女尸体的照片被评为年度最佳作品

    The genocide is not just a matter between the parties involved; it's a concern for all humanity. Gen ...

  5. 由于美国的制程限制,假如我国的同等性能的AI芯片5年内无法实现量产化我们应该如何发展我们的AI领域的基础设施呢?

    相关: 美晶片禁令面難題!封過頭反把市場送中國? 今年华为公司推出了mate pro60手机,可以说我们可以实现7nm芯片的制造了,但是要注意,我们在实现7nm芯片制造的时候使用的应该依旧是被美国限制 ...

  6. Linux环境下配置vscode的C/C++ 的make编译环境(编写makefile方式)

    主要前提内容参照前文: Linux环境下配置vscode的C/C++编译环境 =========================================================== 代 ...

  7. mpi4py和cupy的联合应用(anaconda环境):GPU-aware MPI + Python GPU arrays

    Demo代码: from mpi4py import MPI import cupy as cp comm = MPI.COMM_WORLD size = comm.Get_size() rank = ...

  8. 经典视频分享:Machine Learning: A New ICE (Identification, Control, Estimation) Age ? —— 自动控制和人工智能的结合前景

    机器学习作为近几年兴起的学科,虽然他诞生的时间已经而久远了,但是真正走进人们视野也就是这几年的事情. 机器学习领域本身只有强化学习这个分支和控制类是天然关联的,因此近几年国内的知名高校的强化学习研究者 ...

  9. oracle利用job实现存储过程异步执行

    1.背景 在实际开发中,我们可能会利用存储过程批量处理业务, 对应有些存储过程可能会执行很长时间,这时我们需要客户端点操作后,存储过程异步执行 具体实现如下 1.创建处理业务的存储过程:sp_test ...

  10. vba for excel 随笔

    q1: excel 没有vba入口 1. 快捷键:Alt + F11 2.调出开发工具 1. 打开文件后,依次点击菜单项[文件]-[选项]: 2.在"Excel"选项界面中点击左侧 ...