vant地址:https://youzan.github.io/vant/#/zh-CN/intro

基础用法

List 组件通过loadingfinished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置成false即可。若数据已全部加载完毕,则直接将finished设置成true即可。

<van-list
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell
v-for="item in list"
:key="item"
:title="item"
/>
</van-list>
export default {
data() {
return {
list: [],
loading: false,
finished: false,
    loadTag:1 //标记是否触发onLoad函数
};
}, methods: {
onLoad() {
    
if(loadTag==1){
      //请求接口得到数据给list数组
      this.list=数据;
      app.loadTag=0;
      //在请求成功函数中让 app.loadTag=1;
    }    
setTimeout(() => { // 加载状态结束
this.loading = false; // 数据全部加载完成
if (this.list.length >= 40) {
this.finished = true;
}
}, 500);
}
}
}

  

 

API

Props

参数 说明 类型 默认值 版本
v-model 是否处于加载状态,加载过程中不触发load事件 boolean false -
finished 是否已加载完成,加载完成后不再触发load事件 boolean false -
error 是否加载失败,加载失败后点击错误提示可以重新
触发load事件,必须使用sync修饰符
boolean false -
offset 滚动条与底部距离小于 offset 时触发load事件 number 300 -
loading-text 加载过程中的提示文案 string 加载中... -
finished-text 加载完成后的提示文案 string - -
error-text 加载失败后的提示文案 string - -
immediate-check 是否在初始化时立即执行滚动位置检查 boolean true -
direction 滚动触发加载的方向,可选值为up string down -

Events

事件名 说明 回调参数
load 滚动条与底部距离小于 offset 时触发 -

方法

通过 ref 可以获取到 list 实例并调用实例方法

方法名 说明 参数 返回值
check 检查当前的滚动位置,若已滚动至底部,则会触发 load 事件 - -

Slots

名称 说明
default 列表内容
loading 自定义底部加载中提示

vue之vant组件下拉加载更多的更多相关文章

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

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

  2. Windows Phone 8.1开发:如何让ListView下拉加载更多?

    Windows Phone 8.1开发中使用ListView作为数据呈现载体时,经常需要一个下拉(拇指向上滑动)加载更多的交互操作.如何完成这一操作呢?下面为您阐述. 思路是这样的: 1.在ListV ...

  3. ASP.NET仿新浪微博下拉加载更多数据瀑布流效果

    闲来无事,琢磨着写点东西.貌似页面下拉加载数据,瀑布流的效果很火,各个网站都能见到各式各样的展示效果,原理大同小异.于是乎,决定自己写一写这个效果,希望能给比我还菜的菜鸟们一点参考价值. 在开始之前, ...

  4. iscroll.js实现上拉刷新,下拉加载更多,应用技巧项目实战

    上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...

  5. jquery实现下拉加载更多

    下拉加载更多这种原理很容易想明白,但是不自己写一个简单的,老是不踏实,获取什么高度再哪里获取之类的.于是自己简单写了个,就是页面上有几个div,然后当滚动条拉到某个位置的时候,再继续加载div.顺便又 ...

  6. 下拉加载更多DEMO(js实现)

    项目的一个前端页面展示已购买商品时,要求能下拉加载更多.花了点时间研究这个功能,以前没做过. 首先需要给div加scroll事件,监听滚动条滚动动作.那何时触发加载动作呢?当滚动条滚到底的时候.如何判 ...

  7. dropload.js下拉加载更多

    项目中有用到下拉加载更多的地方,去网上找了一个插件,地址:http://ons.me/526.html总体还是不错的,可能自己不是特别了解这个插件,做项目时,也是遇到了无数问题.项目中要用的是两个ta ...

  8. H5页面下拉加载更多(实用版)

    近期在做一个H5网站,需要下拉加载更多产品列表的功能.百度搜索了好久,什么说法都有,什么插件都有.   醉了.基本上每一个能直接拿来用的. 最后发现: 1.dropload.js 插件  还可以,但是 ...

  9. JQ下拉加载更多

    <!DOCTYPE=html> <html> <head> <script src="jquery-1.4.2.min.js" type= ...

随机推荐

  1. 剑指offer——14机器人的运动范围

    题目描述 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能 ...

  2. c++实现写一个函数,求2个整数的和,要求在函数体内不得使用+,-* /

    #include <iostream> using namespace std; int add(int x, int y) { return x+y; } int addmove(int ...

  3. mysql key分区,分区数制定

    我相信不 太注意的同学肯定会入坑,今天我差点也入坑了,后面自己问自己如果我用key分区,自己问自己 我的分区数应该是多少??? 后面我陷入了沉思......... 我第一次想先随便弄一个分区数,在本地 ...

  4. 使用python和tushare股票交易日历数据,判断节假日周末休市

    接口:trade_cal 描述:获取各大交易所交易日历数据,默认提取的是上交所 注:tushare模块下载和安装教程,请查阅我之前的文章 输入参数 名称       |       类型        ...

  5. C++ static静态成员变量在类中仅仅是声明

    今天写代码时看到: 图1的3个静态成员变量在类中仅仅是声明,没有定义以及分配内存:必须在类外,图中就是cpp中,定义分配内存,才能使用

  6. flutter setInitialRoute: 不生效

    概述 需要实现native跳转到flutter 指定的路由页面. iOS 工程中发现 FlutterViewController  setInitialRouter 无效,在我的需求里面是: 在iOS ...

  7. try-with-resources with JDBC

    I realize this was long ago answered but want to suggest an additional approach that avoids the nest ...

  8. PHP算法之按奇偶排序数组

    给定一个非负整数数组 A,返回一个数组,在该数组中, A 的所有偶数元素之后跟着所有奇数元素. 你可以返回满足此条件的任何数组作为答案. 示例: 输入:[3,1,2,4]输出:[2,4,3,1]输出 ...

  9. 数据库的元数据抽取SQL

    一.数据库驱动类.端口.默认用户名密码 数据库 驱动 端口 用户名 密码 MySQL com.mysql.jdbc.Driver 3306 root root DB2 com.ibm.db2.jcc. ...

  10. 一个切图仔的 CSS 笔记

    1,flexbox~注意,设为 Flex 布局以后,子元素的float.clear和vertical-align属性将失效. 在ios8上要加上前缀 display: -webkit-box; dis ...