使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）

<template><div class="sg-page-body"><div class="sg-list"><van-pull-refresh v-model="pullLoading" @refresh="onPullRefresh" success-text="刷新成功"><van-list v-model="listLoading" @load="onLoadList" :finished="finishedList" finished-text="没有更多了"><van-card v-for="(item,$index) in list" :key="$index">{{item.label}}</van-card></van-list></van-pull-refresh></div></div>
</template><script>export default {data() {return {list: [], //列表数组listLoading: false, //上滑列表加载（每一次上滑的时候）finishedList: false, //上滑列表加载完了所有数据（没有更多了）pullLoading: false, //下拉刷新加载动画start: 0, //从第1页开始limit: 10, //每页10条数据累加qylx: ""};},methods: {//下拉刷新列表■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■onPullRefresh() {this.list = [];this.start = 0;this.finishedList = false;this.onLoadList();},//上滑加载列表________________________onLoadList() {// 异步更新数据if (this.finishedList) return;var data = {start: this.start,limit: this.limit,qylx: this.qylx};this.$d.API_NAME(data, {success: d => {/*这里写代码*/this.list = this.list.concat(d);this.pullLoading = this.listLoading = false; // 加载和下拉状态结束this.finishedList = d.length === 0; //上滑列表加载完了所有数据（没有更多了）}});this.start++;}// ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■}};
</script>

使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）相关推荐

uni-app 小程序项目三 1. 商品列表、过滤器、封装商品item组件、上拉加载、节流阀、下拉刷新、2. 商品详情、轮播图、商品价格闪烁问题 3.加入购物车、vuex、持久化存储、mixiins
1.0 创建 goodslist 分支 1.1 定义请求参数对象为了方便发起请求获取商品列表的数据,我们要根据接口的要求,事先定义一个请求参数对象: data() {return {// 请求参数对 ...
前人铺路系列组件hevue-img-preview 2.5更新，增加键盘控制，节流，图片加载等待等，来看看有没有你可以借鉴的思路或功能
hello啊,every body ,大家好,之前我们(其实只有我自己啦,为什么用我们呢?可能是为了装作我有一个团队吧,也可能只是为了顺口
android下拉刷新动画效果代码_vue项目实录：下拉刷新组件的开发及slot的使用
"下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉 ...
vue项目实录：下拉刷新组件的开发及slot的使用
"下拉刷新"和"上滑加载更多"功能在前端.尤其是移动端项目中非常重要,这里笔者由曾经做过的vue项目中的"blink"功能和各位探讨下[下拉 ...
用vant框架做H5时踩过的坑（下拉刷新、上拉加载等）
用vant框架做H5时踩过的坑 1. 页面在手机端不能上下滑动,在PC端浏览器正常滑动说明:在设置了overflow:auto;属性的前提下,H5页面在PC端浏览器里展示可以上下滑动,在ios上可正 ...
[ vant ] vue移动端下拉刷新组件
学习关键语句: vant list组件和下拉刷新 vant 下拉刷新和局部滚动冲突写在前面每一次 ! 我是说每一次我在使用 vant 组件库里面 list组件和下拉刷新连在一起用的时候都会出现下 ...
（翻译）下拉刷新（Pull to refresh）
问题概述用户想获得更多的内容,或是刷新当前在屏幕上显示的内容. 示例用途用于刷新或更新任意可更新的内容,例如列表.网格列表.按时间逆序排列的卡片集合(即卡片集合按时间先后顺序反向排列).例如 ...
Android下拉刷新、上拉加载更多组件FlyRefreshLayout详解
舞动着键盘和鼠标,我誓言要把这个世界写的明明白白本文出自门心叼龙的博客,属于原创类容,转载请注明出处.https://blog.csdn.net/geduo_83/article/details/8 ...
html仿照聊天下拉刷新,h5实现下拉刷新，模拟原生下拉刷新，封装组件
上一篇,我们实现了h5 实现向左平滑,出现按钮操作,封装组件,模拟购物车左滑删除,现在我们将要实现一个下拉刷新的组件,模拟原生下拉刷新的操作.这对h5手势的要求也是蛮高的,接下来,我们就一步一步的实现 ...

使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）

使用Vant框架的组件van-pull-refresh搭配van-list和van-card完成上滑加载更多列表数据，下拉刷新当前列表数据（等同于翻页功能）相关推荐

最新文章

热门文章