需求:比如我们要先加载6条信息,触底时候再加载6条信息
1、第一次加载6条,aaa为我们的接口,所以在mounted里面写this.aaa(6)
2、在aaa事件里面传num,如aaa(num),然后拼接在接口
3、每次触底,再次执行aaa接口
4、定义moreNum,每次增加的次数写在触底事件里面
data() {
return {
moreNum: 0, //触底更多
}
},
mounted() {
this.aaa(6); //初始加载6条
var that = this;
// 滚动触底事件
window.onscroll = function () {
var marginBot = 0;
if (document.documentElement.scrollTop) {
var X = document.documentElement.scrollHeight;
var Y = document.documentElement.scrollTop + document.body.scrollTop;
var Z = document.documentElement.clientHeight;
marginBot = X - Y - Z;
} else {
var J = document.body.scrollHeight;
var I = document.body.scrollTop;
var K = document.body.clientHeight;
marginBot = J - I - K;
}
if (marginBot <= 0) {
console.log("触底发生的事件")
that.aaa(that.moreNum + 6)
}
}
},
methods:{
aaa(num){
this.moreNum = num;
var _this = this;
$.ajax({
url:xxxxxxxxxx?num="+num, //xxxxxxx为你接口地址
success:function(res){
_this.aaa = res.data;
}
});
},
}