了解List组件的基本用法

链接：https://youzan.github.io/vant/#/zh-CN/list#ji-chu-yong-fa
基础用法
List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可

<van-listv-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,};},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);},},
};

示例

 methods: {// 封装获取文章列表数据的方法// isRefresh为布尔值  是否下来刷新async initArticleList(isRefresh) {// 发起 GET 请求，获取文章的列表数据const { data: res } = await getArticleListAPI(this.page, this.limit)// 下拉传true  不下拉默认undefined falseif (isRefresh) {// 证明是下拉刷新；新数据在前，旧数据在后// this.artlist = [新数据在后, 旧数据在前]// ...表示将数组展开this.artlist = [...res, ...this.artlist]this.isLoading = false} else {// 证明是上拉加载更多；旧数据在前，新数据在后// this.artlist = [旧数据在前, 新数据在后]this.artlist = [...this.artlist, ...res]this.loading = false}if (res.length === 0) {// 证明没有下一页数据了，直接把 finished 改为 true，表示数据加载完了！this.finished = true}},// 只要 onLoad 被调用，就应该请求下一页数据onLoad() {console.log('触发了 load 事件！')// 1. 让页码值 +1this.page++// 2. 重新请求接口获取数据this.initArticleList()},// 下拉刷新的处理函数onRefresh() {console.log('触发了下拉刷新！')// 1. 让页码值 +1this.page++// 2. 重新请求接口获取数据this.initArticleList(true)}},

了解List组件的基本用法相关推荐

Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
java的setbounds_java Swing组件setBounds()简单用法实例分析
本文实例讲述了java Swing组件setBounds()简单用法.分享给大家供大家参考,具体如下: 先看API: public void setBounds(Rectangle r) 移动组件并调 ...
Ext.form.TextField组件的基本用法
本文主要介绍Ext.form.TextField组件的基本用法: <form id="form1" runat="server"> <div& ...
vue中父子组件及 watch用法
父子组件及 watch vue中父子组件及 watch用法 - coder_zhang123456 - 博客园
目录树组件QTreeWidget和停靠区域组件QDockWidget的用法
简述: 目录树组件QTreeWidget和停靠区域组件QDockWidget的和QScrollArea用法:然后写的一个小的相册查看器例子文章目录 QTreeWidget组件: QDockWidg ...
react-native播放视频组件 react-native-video的用法
react-native-video 是一个播放视频的开源组件, 它的用法很简单. 1.安装依次执行下面两个命令, npm i -S react-native-video react-native ...
uniapp将时间日期格式化的组件uni-dateformat的用法
uniapp开发时,我们需要将数据库里取到的时间戳格式化为某个格式的日期时间形式,uniapp官方插件市场的uni-dateformat组件即可解决. uniapp官方插件地址及详细用法介绍:uni- ...
JS组件系列——KnockoutJS用法
前言:出于某种原因,需要学习下Knockout.js,这个组件很早前听说过,但一直没尝试使用,这两天学习了下,觉得它真心不错,双向绑定的机制简直太爽了.今天打算结合bootstrapTable和Kno ...
element input组件常用属性用法
在vue项目中肯定会用到element组件库,里面的input组件的用法和常用属性如下: ** 1,type属性:用法跟原生输入框一样,例:type="text",type=&qu ...

了解List组件的基本用法

了解List组件的基本用法相关推荐

最新文章

热门文章