admin管理员组文章数量:1648973
1、HTML结构
注:该方法所执行的基础是10条数据的高度总和应大于列表盒子固定高度
<ul class="my_list" @scroll="scrollEvent">
<li v-for="(item, index) in myList" :key="item.id"></li>
</ul>
2.滚动加载分页方法以及所需变量配置
data() {
return {
isUpdate: true, // 是否到底-最后一页
filter: {
count: 10, // 页大小
page: 1, // 当前页
params: {
status: "0", // 额外传参
}
},
myList: [], // 列表数据集合
total: 0, // 一共有多少条数据
}
},
mounted() {
this.loadData();
},
methods: {
// 首次加载
loadData() {
let data = {
count: this.filter.count, // 页大小
page: this.filter.page, // 当前页
params: {
status: this.filter.params.status
}
}
api.list(data).then(res => {
if(res.status == 0 && res.data.results.length != 0){
this.myList= res.data.results;
this.total = res.data.count;
}
}).catch(() => {
});
},
// 下拉数据更新加载
updateData() {
let data = {
count: this.filter.count, // 页大小
page: this.filter.page, // 当前页
params: {
status: this.filter.params.status
}
}
api.list(data).then(res => {
if(res.status == 0 && res.data.results.length != 0){
var myList = this.myList;
res.data.results.forEach(function (item){
myList.push(item);
})
this.myList = myList;
this.total = res.data.count;
} else {
this.filter.page -= 1;
if(res.data.results.length == 0) {
this.isUpdate = false;
this.$message.warning("到底了");
} else {
this.$message.error("操作失败");
}
}
}).catch(() => {
this.filter.page -= 1;
this.$message.error("操作失败");
});
},
// 列表滚动事件
scrollEvent (e) {
if ((e.srcElement.offsetHeight + e.srcElement.scrollTop) - e.srcElement.scrollHeight === 0) {
if(this.isUpdate) {
this.filter.page += 1;
this.updateData();
} else {
this.$message.warning("到底了");
}
}
},
}
3.列表样式
my_list{
height: 100vh; // 设置固定高度
overflow: scroll;
li {
background-color: #ffffff;
margin-bottom: 0.20rem;
}
}
版权声明:本文标题:VUE 列表页中实现分页加载(下拉到底部触发下一页 ) 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1729504709a1203492.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论