本篇内容介绍了“van-list不断onLoad加载怎么解决”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
van-list 下拉的时候,不断请求后台加载数据,真的是坑。。。。
this.$http.post(url, params).then(function (res) {
this.list = [];
if (res.data.data.length == 0) {
that.finished = true
} else {
that.list = [...that.list , ...res.data.data]
}
that.loading = false
}).catch((reason) => {
Toast.fail("查询列表数据!" + reason);
})
首先说下出现不断加载的一种情况, 解决方法是设置:offset="20";
这是网上常说的,然而并没有什么卵用。。。
this.list = [];
坑爹,不能清空,清空之后就会判断没填满空间,就会不断加载。。。。
van-list是瀑布流滚动加载,用于展示长列表,当列表即将滚动到底部时,会触发事件并加载更多列表项。
引入
import Vue from 'vue';
import { List } from 'vant';
Vue.use(List);
页面渲染
<van-list class="mylist"
v-model="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad" >
<van-cell v-for="(item,index) in list" :key="index" class="mycell">
{{item.name}}
</van-cell>
</van-list>
数据定义
export default {
data() {
return {
list: [],
loading: false,
finished: false,
total: 0,
// 查询参数
queryParams: {
pageNum: 0,
pageSize: 6,
deptname: null,
username: null,
createTime: null,
jigou: null,
},
defaultdept:null,
keyWords:"",
};
},
}
方法实现
methods:{
async onLoad() {
this.loading = true;//防止第一页重复加载
this.queryParams.jigou = this.defaultdept
listWuzicount(this.queryParams).then(res => {
this.total = res.total;
if(this.total <= this.queryParams.pageSize){
this.list= res.rows
}else{
this.queryParams.pageNum++;
let arr = res.rows;
this.list= this.list.concat(arr);
};
// 加载状态结束
this.loading = false;
// 数据全部加载完成
if (this.list.length >= this.total) {
this.finished = true;
}
})
},
},
watch:{
defaultdept(val){
this.queryParams.jigou = val
this.list= []
this.queryParams.pageNum = 1
this.finished = false;
this.onLoad();
},
keyWords(val){
this.queryParams.deptname = val
this.list= []
this.queryParams.pageNum = 1
this.finished = false;
this.onLoad();
},
}
this.queryParams.pageNum = 1
//每次走完函数,将当前页恢复至1,防止后面累加,导致点击别的筛选条件时无效,返回finished-text
this.finished = false;
//同样,也要将finished恢复,否则,执行别的筛选条件时,会显示finished-text,并且导致明明还有数据,但是不会加载出来.
“van-list不断onLoad加载怎么解决”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站,小编将为大家输出更多高质量的实用文章!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。