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;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
如需转载请保留出处:https://bianchenghao.cn/36201.html