Vant 的List 组件 默认支持 瀑布流滚动加载。官方的示例是用定时器模拟的数据。我们在项目实战中,肯定是结合ajax请求处理的。那么我们该如何实现这个效果呢?

Vant 的 List组件 使用方法这里就不详细说明了,官方文档已经写的很详细了。直接上项目中的实战代码:

<template>
<div>
<van-list
v-model="loading"
:finished="finished"
:immediate-check="false"
finished-text="没有更多了"
@load="onLoad"
:offset="10"
>
//itemList换成你自己的数据
<van-cell v-for="item in itemList" :key="item.id"> </van-cell>
</van-list> //没数据时显示
<div class="no-data" v-if="!this.itemList">
<img src="../assets/images/null.png" alt="暂无记录" class="img" />
</div>
</div>
</template> <script>
export default {
created() {
//创建组件时,加载第1页数据
this.getroadList();
}, data() {
return {
loading: false,
finished: false,
page: 1,//请求第几页
pageSize: 10,//每页请求的数量
total: 0,//总共的数据条数
itemList: [],
};
}, methods: {
getroadList() {
let params = {
page: this.page,
pageSize: this.pageSize
}; //this.$api.pay.schedule(params)是我自己封装的get请求接口
this.$api.pay.schedule(params).then(res => {
let rows = res.data.rows; //请求返回当页的列表 this.loading = false;
this.total = res.data.total; if (rows == null || rows.length === 0) {
// 加载结束
this.finished = true;
return;
} // 将新数据与老数据进行合并
this.itemList = this.itemList.concat(rows); //如果列表数据条数>=总条数,不再触发滚动加载
if (this.itemList.length >= this.total) {
this.finished = true;
}
});
}, //滚动加载时触发,list组件定义的方法
onLoad() {
this.page++;
this.getroadList();
}
}
};
</script>

注意事项:

设置<van-list>组件 :immediate-check="false"

理由:禁止 List 初始化时触发 load 事件。把加载第一屏的事件放在 created() 里面。

Vant 实现 上拉加载更多的更多相关文章

  1. vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多

    一.思路分析和效果图 用vue来实现一个瀑布流效果,加载网络图片,同时有下拉刷新和上拉加载更多功能效果.然后针对这几个效果的实现,捋下思路: 根据加载数据的顺序,依次追加标签展示效果: 选择哪种方式实 ...

  2. 原生js移动端touch事件实现上拉加载更多

    大家都知道jQuery里没有touch事件,所以在移动端使用原生js实现上拉加载效果还是很不错的,闲话不多说,代码如下: //获取要操作的元素 var objSection = document.ge ...

  3. H5基于iScroll实现下拉刷新,上拉加载更多

    前言 前一段有个手机端的项目需要用到下拉刷新和上拉加载更多的效果,脑海里第一反映就是微博那种效果,刚开始的理解有些偏差,以为下拉也是追加数据,上拉也是追加数据,后请教同事后发现其实下拉只是刷新最新数据 ...

  4. 常见开发需求之angular上拉加载更多

    需求   移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...

  5. ListView实现Item上下拖动交换位置 并且实现下拉刷新 上拉加载更多

    ListView实现Item上下拖动交换位置  并且实现下拉刷新  上拉加载更多 package com.example.ListViewDragItem; import android.app.Ac ...

  6. ionic 上拉加载更多&瀑布流加载&滚动到底部加载更多 主意事项

    首先下拉刷新的代码是这样的,标红的地方为关键代码 <html> <head> <meta charset="utf-8"> <meta n ...

  7. android ListView下拉刷新 上拉加载更多

    背景 最近在公司的项目中要使用到ListView的下拉刷新和上拉加载更多(貌似现在是个项目就有这个功能!哈哈),其实这个东西GitHub上很多,但是我感觉那些框架太大,而且我这个项目只用到了ListV ...

  8. Android 上拉加载更多功能

    前几天看了github上面的例子,参照它的实现,自己又稍微改了一点,往项目里面增加了一个上拉加载更多功能.具体的实现如下: 首先要重写ListView: import android.content. ...

  9. android ListView上拉加载更多 下拉刷新功能实现(采用pull-to-refresh)

    Android实现上拉加载更多功能以及下拉刷新功能, 采用了目前比较火的PullToRefresh,他是目前实现比较好的下拉刷新的类库. 目前他支持的控件有:ListView, ExpandableL ...

随机推荐

  1. [转帖]k8s 基本使用(上)

    k8s 基本使用(上) https://www.jianshu.com/p/8d60ce1587e1 本文将介绍 k8s 中的一些最基本的命令,并辅以解释一些基本概念来方便理解,也就是说,本文是一篇偏 ...

  2. 『Tree nesting 树形状压dp 最小表示法』

    Tree nesting (CF762F) Description 有两个树 S.T,问 S 中有多少个互不相同的连通子图与 T 同构.由于答案 可能会很大,请输出答案模 1000000007 后的值 ...

  3. 『7.5 NOIP模拟赛题解』

    T1 Gift Description ​ 人生赢家老王在网上认识了一个妹纸,然后妹纸的生日到了,为了表示自己的心 意,他决定送她礼物.可是她喜爱的东西特别多,然而他的钱数有限,因此他想 知道当他花一 ...

  4. Java学习:迭代器简介

    迭代器 java.util.Iterator接口:迭代器(对集合进行遍历) 有两个常用的方法 boolean hasNext() 如果仍有元素可以迭代,则返回 true. 判断集合中还有没有下一个元素 ...

  5. redis字符串类型键的二进制操作

    命令名称:setbit 语法:setbit key offset value 功能: 1)对key所存储的字符串值,设置或清除指定偏移量上的位(bit),位的设置或清除取决于value参数,可以是0也 ...

  6. 完美解决SpringMVC中静态资源无法找到(No mapping found for HTTP request with URI)问题

    https://blog.csdn.net/kingmax54212008/article/details/79330308 今天遇到一个比较新奇的问题,但是也应该是使用spring MVC框架时由于 ...

  7. Centos7yum源配置PID锁定问题

    在设置centos7的yum源时,执行 yum clean all 出现PID被锁定的问题: 解决的方法就是: rm -rf /var/run/yum.pid 删除这个文件之后就可以恢复正常.

  8. easydict的使用方法

    easydict的作用:可以使得以属性的方式去访问字典的值 from easydict import EasyDict as edict a=['8',2,3]a=edict()a.f=99print ...

  9. 使用JavaConfig配置SpringMVC

    目录结构 web.xml: <?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi ...

  10. Python 数学运算的函数

    不需要导入模块(内置函数) 函数 返回值 ( 描述 ) abs(x) 返回绝对值 max(x1, x2,...) 最大值,参数可以为序列. min(x1, x2,...) 最小值,参数可以为序列. p ...