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. web3 产品介绍: walletconnect 连接Web3 DApps与用户的移动加密钱包

    WalletConnect是一种去中心化的开源协议,旨在连接Web3 DApps与用户的移动加密钱包,提供更安全.更便捷的加密货币交易体验.在本文中,我们将介绍WalletConnect的主要特点.工 ...

  2. 3、Git之常用命令

    3.1.速查表 命令 作用 git config --global user.name 用户名 设置用户签名(昵称) git config --global user.email 邮箱 设置用户签名( ...

  3. 【SpringCloud】Nacos集群部署(Centos平台)

    一.前提环境准备 Nacos 下载 https://github.com/alibaba/nacos/releases 或者使用其它博主备份的 https://blog.csdn.net/weixin ...

  4. 【Java】File 文件类

    File 文件类 File类的一个对象,代表了一个文件和一个文件目录/文件夹 File类所属在java.io 的包下 构造器部分 - 以parent为父文件,child为子路径创建File对象,可以理 ...

  5. 【Spring-Security】Re12 JsonWebToken

    一.认证机制种类: 1.HTTP-Basic-Auth 每次请求接口必须提供账号信息[username + password] 但是信息有暴露风险,配合RestFul风格使用,逐渐淘汰 2.Cooki ...

  6. 最新版gym-0.26.2下Atari环境的安装以及环境版本v0,v4,v5的说明

    强化学习的游戏仿真环境可以分为连续控制和非连续控制两类,其中连续控制的以mujoco为主,而非连续控制的以Atari游戏为主,本文对gym下的Atari环境的游戏环境版本进行一定的介绍. 参考:[转载 ...

  7. 3.2.0 版本预告!远程日志解决 Worker 故障获取不到日志的问题

    Apache DolphinScheduler 3.2.0 版本已经呼之欲出,8 月 中下旬,这个大版本就要和用户见面了.为了让大家提前了解到此版本更新的主要内容,我们已经制作了几期视频和内容做了大致 ...

  8. HTTP 常见状态码【5种最最最常见的状态码】

    HTTP 常见状态码 一.200 [ok] 一切正常 二.400 [Bad Request] 客户端 出现问题 需要注意:前端传入的参数与后台接收数据时的 参数名 必须保持一致 三.500 [Inte ...

  9. navicat远程连接报错

    mysql,2003 can't connect to mysql server on 10038 我们连接远程服务器的mysql,如果出现问题,很大问题会出在服务器的端口和授权问题 # 首先我们通过 ...

  10. Modbus ASCII 获取数据

    根据银河高低温试验箱协议读取数据 1.协议内容 8.1:通讯协议介绍 8.1.5 通讯设置 本通讯协议使用异步串行通讯方式,1 个起始位.8 个数据位.2 个停止 位.无奇偶校验数据通讯格式,其中数据 ...