![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/812e50e23934e5754d96ba329c249329.png)
地址列表组件没有无法使用上拉加载,所以原生js实现
- 给列表部分注册touchmove事件,监听用户滑动屏幕
- 判断滚动条的位置距离底部高度为100时,page+1,并且拉去接口
- 当接口调取过程中或者已经没有新的收据的时候,阻止page+和掉接口
方案:loading和finished初始值为false,当开始掉接口时loading为true,接口成功为false;
接口返回数据为空finish为true
==》当loading或finish为true时,return
网页正文全文高:document.body.scrollHeight
网页可见区域高:document.body.clientHeight
网页被卷去的高:document.body.scrollTop
==》滚动条距离底部的高度=document.body.scrollHeight - document.body.scrollTop - document.body.clientHeight
mounted() {
this.init();
let listObj = document.querySelector(".van-radio-group");
listObj.addEventListener("touchmove", () => {
let height =
listObj.scrollHeight - listObj.scrollTop - listObj.clientHeight;
console.log(height);
if (height < 110) {
if (this.loading || this.finished) return;
this.page += 1;
console.log("当前", this.page);
this.init();
}
});
},
init() {
if (this.loading || this.finished) return;
this.loading = true;
this.axios
.post("/api/address/index", { page: this.page })
.then((data) => {
if (data.length > 0) {
if (data.length < 10) {
this.finished = true;
}
data.forEach((item) => {
this.$set(item, "tel", item.phone);
this.$set(item, "id", item.address_id);
this.$set(
item,
"address",
item.province_name +
" " +
item.city_name +
" " +
item.district_name +
" " +
item.details
);
if (!this.source && item.status == 1) {
this.chosenAddressId = item.address_id;
}
});
this.list = this.list.concat(data);
this.loading = false;
} else {
this.finished = true;
}
});
},
.address {
height: 100vh;
overflow-y: scroll;
.list {
height: 100vh;
overflow-y: scroll;
padding: 0 0 0 5px;
.van-radio-group {
height: 92vh;
overflow-y: scroll;
}
}
}