一、列表渲染中,有时候列表数据量比较大,一次性渲染页面会卡顿。如我有个users对象数组,这个users是动态添加的,支持删除操作。
1、一次性加载的写法:
<div class="user-col scoll-col">
<div class="user-item" v-for="(user, index) in users" :key="index">
{{ user.userName + '(' + user.userAccount + ')' }}
<a href="javascript:void(0);" @click="deleteAddUser(index)" class="delete-
icon">X</a>
</div>
</div>
<style scoped lang="less">
.user-col {
.user-item {
margin-left: 10px;
}
.delete-icon {
float: right;
margin-right: 20px;
}
}
//限制高度滚动条
.scoll-col {
max-height: 300px;
overflow-y: auto;
}
</style>
一次性加载,拖动右侧自定义的滚动条,拖动到最底部则展示最后一条数据。而滚动加载,拖动到最下面会触发加载事件。
2、换成滚动加载:
<div class="infinite-list-wrapper" style="overflow:auto">
<template>
<ul class="infinite-list" v-infinite-scroll="scrollLoadUser" style="overflow:auto;height:300px">
<li v-for="i in scrollCount" class="infinite-list-item" :key="i" infinite-scroll-
disabled="disabled">
<div v-if="users[i - 1]">
{{ users[i - 1].userName + '(' + users[i - 1].userAccount + ')' }}
<a href="javascript:void(0);" @click="deleteAddUser(i - 1)" class="delete-
icon">X</a>
</div>
</li>
</ul>
<p v-if="scrollUserLoading">加载中...</p>
<!-- <p v-if="scrollUserNoMore && addUsers.length > 0">没有更多了</p> -->
</template>
</div>
<script>
data(){
return{
users:[],
//滚动加载
scrollCount: 0,
scrollUserLoading: false
}
},
computed: {
scrollUserNoMore() {
return this.scrollCount >= this.addUsers.length;
},
disabled() {
return this.scrollUserLoading || this.scrollUserNoMore;
}
},
methods:{
scrollLoadUser() {
//一次加载20条
let increaseCount = 20;
let addAllCount = this.addUsers.length;
if (this.scrollCount + increaseCount > addAllCount) {
this.scrollCount = addAllCount;
} else {
this.scrollCount += increaseCount;
}
console.info('加载数据:' + this.scrollCount);
},
},
watch: {
users: {
handler: function(val) {
if (val && val.length > 0) {
this.scrollLoadUser();
}
}
}
}
</script>
初始化的时候会调用scrollLoadUser方法,滚动条滚动到最下方也会调用scrollLoadUser。由于users是动态添加的,在监听users变化的时候再调用一次scrollLoadUser。在scrollLoadUser方法中,则根据users的长度判断是否需要加载。