vant 做表格_Vant List 列表
介绍
瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。
引入import Vue from 'vue';
import { List } from 'vant';
Vue.use(List);
代码演示
基础用法
List 组件通过loading和finished两个变量控制加载状态,当组件滚动到底部时,会触发load事件并将loading设置成true。此时可以发起异步操作并更新数据,数据更新完毕后,将loading设置成false即可。若数据已全部加载完毕,则直接将finished设置成true即可。
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
export default {
data() {
return {
list: [],
loading: false,
finished: false
};
},
methods: {
onLoad() {
// 异步更新数据
// setTimeout 仅做示例,真实场景中一般为 ajax 请求
setTimeout(() => {
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= 40) {
this.finished = true;
}
}, 1000);
}
}
}
错误提示
若列表数据加载失败,将error设置成true即可显示错误提示,用户点击错误提示后会重新触发 load 事件。
v-model="loading"
:error.sync="error"
error-text="请求失败,点击重新加载"
@load="onLoad"
>
export default {
data() {
return {
list: [],
error: false,
loading: false
};
},
methods: {
onLoad() {
fetchSomeThing().catch(() => {
this.error = true;
})
}
}
}
下拉刷新
List 组件可以与 PullRefresh 组件结合使用,实现下拉刷新的效果
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
export default {
data() {
return {
list: [],
loading: false,
finished: false,
refreshing: false
};
},
methods: {
onLoad() {
setTimeout(() => {
if (this.refreshing) {
this.list = [];
this.refreshing = false;
}
for (let i = 0; i < 10; i++) {
this.list.push(this.list.length + 1);
}
this.loading = false;
if (this.list.length >= 40) {
this.finished = true;
}
}, 1000);
},
onRefresh() {
// 清空列表数据
this.finished = false;
// 重新加载数据
// 将 loading 设置为 true,表示处于加载状态
this.loading = true;
this.onLoad();
}
}
}
API
Props参数说明类型默认值v-model是否处于加载状态,加载过程中不触发load事件booleanfalse
finished是否已加载完成,加载完成后不再触发load事件booleanfalse
error是否加载失败,加载失败后点击错误提示可以重新
触发load事件,必须使用sync修饰符booleanfalse
offset滚动条与底部距离小于 offset 时触发load事件number | string300
loading-text加载过程中的提示文案string加载中...
finished-text加载完成后的提示文案string-
error-text加载失败后的提示文案string-
immediate-check是否在初始化时立即执行滚动位置检查booleantrue
direction滚动触发加载的方向,可选值为upstringdown
Events事件名说明回调参数load滚动条与底部距离小于 offset 时触发-
方法
通过 ref 可以获取到 List 实例并调用实例方法,详见 组件实例方法方法名说明参数返回值check检查当前的滚动位置,若已滚动至底部,则会触发 load 事件--
Slots名称说明default列表内容
loading自定义底部加载中提示
finished自定义加载完成后的提示文案
error自定义加载失败后的提示文案
常见问题
List 的运行机制是什么?
List 会监听浏览器的滚动事件并计算列表的位置,当列表底部与可视区域的距离小于offset时,List 会触发一次 load 事件。
为什么 List 初始化后会立即触发 load 事件?
List 初始化后会触发一次 load 事件,用于加载第一屏的数据,这个特性可以通过immediate-check属性关闭。
为什么会连续触发 load 事件?
如果一次请求加载的数据条数较少,导致列表内容无法铺满当前屏幕,List 会继续触发 load 事件,直到内容铺满屏幕或数据全部加载完成。因此你需要调整每次获取的数据条数,理想情况下每次请求获取的数据条数应能够填满一屏高度。
loading 和 finished 分别是什么含义?
List有以下三种状态,理解这些状态有助于你正确地使用List组件:非加载中,loading为false,此时会根据列表滚动位置判断是否触发load事件(列表内容不足一屏幕时,会直接触发)
加载中,loading为true,表示正在发送异步请求,此时不会触发load事件
加载完成,finished为true,此时不会触发load事件
在每次请求完毕后,需要手动将loading设置为false,表示加载结束
使用 float 布局后一直触发加载?
若 List 的内容使用了 float 布局,可以在容器上添加van-clearfix类名来清除浮动,使得 List 能正确判断元素位置
在 html、body 上设置 overflow 后一直触发加载?
如果在 html 和 body 标签上设置了overflow-x: hidden样式,会导致 List 一直触发加载。html,
body {
overflow-x: hidden;
}
这个问题的原因是当元素设置了overflow-x: hidden样式时,该元素的overflow-y会被浏览器设置为auto,而不是默认值visible,导致 List 无法正确地判断滚动容器。解决方法是去除该样式,或者在 html 和 body 标签上添加height: 100%样式。
vant 做表格_Vant List 列表相关推荐
- vant 做表格_Vant Cell 单元格
引入import Vue from 'vue'; import { Cell, CellGroup } from 'vant'; Vue.use(Cell); Vue.use(CellGroup); ...
- HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性
HTML的表格标签,列表标签,表单标签,HTML5有哪些新特性 欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页: ...
- 效率 用div做表格和tr_表格也能用Word做?别不信,利用这些小技巧分分钟做出完美表格...
一般我们在说到做表格的时候,很多小伙伴都会想到并选择Excel来制作,但是大家知道吗,其实在Word中也是可以做出非常漂亮的表格的.今天小编将分享几个Word制表小技巧给大家,帮大家轻松完成Word表 ...
- 中继器做表格--普通表格
前言: 作为一个B端的产品经理,用到的最多的就是表格了,我刚毕业那会儿一开始是一个矩形一个矩形的做成一个拼凑表格,这种方式调格式还赋值都会特别特别的麻烦,会消耗自己好多时间效率很低:后来好一点就用原始 ...
- CSS的表格样式和列表样式
-----------------------------------------------CSS的表格样式和列表样式---------------------------------------- ...
- 手机表格html5,手机上怎么做表格?
手机上怎么做表格?以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧! 手机上怎么做表格? 我的手机都是通过下载安装wps这个 ...
- php excel导出sheet表,phpexcel来做表格导出(多个工作sheet)
1.先得去下载phpexcel文档,加压下来 /** * 简单实用Execl */ set_include_path('.'.get_include_path().PATH_SEPARATOR.dir ...
- 如何在 Python 中以表格格式打印列表?
在 Python 中,列表是一种常见的数据结构,用于存储和组织数据.当我们需要将列表的内容以表格形式展示时,可以通过特定的方法和技巧来实现.本文将详细介绍如何在 Python 中以表格格式打印列表,以 ...
- dw怎么做html表格,DW里怎么做表格呢?用DW做表格的详细方法
进入到页面之后,把鼠标定位到 的中间,或者也可以自己选择把页面上的代码都删除了,这个对我们做网店装修没有影响 点击一下菜单栏里的"插入"-"表格",设置相关的参 ...
最新文章
- python字符串写入excel-Python向excel中写入数据的方法
- Docker+mysql
- 数据库schema 是什么
- Android是否会因低价打败iPhone
- 华为nova4是不是鸿蒙系统,华为nova 4手机什么时候可以升级鸿蒙系统?鸿蒙系统nova4升级时间介绍...
- python牛顿法寻找极值_python使用梯度下降和牛顿法寻找Rosenbrock函数最小值实例...
- Spring JSF集成
- 那个把iPhone卖这么贵的女高管离开了 个人信息已从苹果官网撤下
- 利用React/anu编写一个弹出层
- TensorFlow基础篇(二)——tf.get_variable()和tf.get_variable_scope()
- 基于vue的UI框架ydui中的楼层跳跃scrolltab问题解决
- ESX通过命令行重启虚拟机
- java游戏征途2008_醉剑逍遥-征途天下
- 第十一章 性能与可伸缩性(待续)
- Echarts与bmap结合使用百度地图系统自带的12个个性化模板mapStyle列表
- 桌面程序开发 —如何做icns文件
- 装的机械硬盘计算机里没有反应,固态硬盘和机械硬盘运行打开我的计算机图标,有时候读取没有响应,单独用固态硬盘是没问题的 ,机械硬盘也测试了,没有坏道什么的,始终找不到原因...
- 人工智能入门算法逻辑回归学习笔记
- PC端下载B站和yotube视频的简单方法: you-get
- php微信公众号无限制群发,微信公众号无限群发 - viki_php的个人空间 - OSCHINA - 中文开源技术交流社区...
热门文章
- 专访厦门第二医院影像科主任郭岗:基于 IBM 推出的 AI 集成解决方案,如何给医生减负增效?...
- 在linux下玩转usb摄像头
- MySQL中文全文检索
- The 30 CSS Selectors you Must Memorize
- 用友U8配置动态密码认证
- AutoCAD VBA对齐对象
- apache动态编译/静态编译区别
- 远程桌面连接提示“您的凭据不工作”
- java异常处理图片_Java处理图片时出现异常
- chrome浏览器中遇到bug【Error in event handler: TypeError: Cannot read property 'name' of undefined】