页面滑动到底部触发内容加载（参考网址https://www.jianshu.com/p/29aa8ac3e1c5）
原理：首先要先判断页面怎么样才是滚动到底部，也就是scrollTop+window的height是否大于document的height
if($(window).scrollTop()+$(window).height()>=$(document).height()){
<!--dosomething-->
}然后在window对象上绑定scroll事件
$(window).on("scroll", function(){
<!--dosomething-->
})接下来我在vue实例中发送请求的methods中加入了以上代码。
但是他并不工作。好吧，我来找找原因。
经过思考发现虽然我给window绑定了调用vue内请求数据函数的事件，但window貌似并不能调用vue实例内的方法。
经过试验，发现是scroll事件只能在window上监听。这就难倒我了？难道要我用ajax来请求？我的页面结构可都是vue请求来的！那岂不是得重写！
再思考。
好吧！我可以在vue实例内加一个隐藏的div，给他设置一个click事件。然后在第一次请求列表的时候就给我window绑定一个触底事件，触底就用trigger触发div的click事件
var data = {page: "1"}
var app = new Vue({
el: #app,
data: {
resultlist: null
}，
created: function(){
getList()
clickNextPage()
},
methods: {
getList: function () {
this.$http.jsonp({ //调用接口
data: data,
method: 'POST',
url: url.getHouseList,
emulateJSON: true,
}).then(function (res) { //接口返回数据
this.resultlist = res.data.result
data.page++
})
$(window).on("scroll", function () { //给window绑定scroll触底事件
if ($(window).scrollTop() + $(window).height() + 1 >= $(document).height()) {
$(".nextPage").trigger("click")
}
})
// }
},
clickNextPage: function () { //给隐藏div绑定click事件
this.$http.jsonp({ //调用接口
data: data,
method: 'POST',
url: url.getHouseList,
emulateJSON: true,
}).then(function (res) { //接口返回数据
var curList = res.data.result
if (this.resultlist) {
this.resultlist = this.resultlist.concat(curList)
data.page++
}
})
},
}
})自己的实际案例：
HTML：别忘记
<div style="display:none;" @click="clickNextPage" class="nextPage"></div>
JS内容
import axios from "axios";
export default {
name: "website-domain",
data() {
return {
data:{page: 0},
resultlist: null
}
},
created: function(){
$(window).on("scroll", function () {
//给window绑定scroll触底事件
if ($(window).scrollTop() + $(window).height() + 1 >= $(document).height()) {
$(".nextPage").trigger("click")
}
})
this.getList()
},
methods: {
getList: function () {
axios.get('/api/graphql?', {
params: {
query: customMenu
}
}).then(res => { //接口返回数据
//console.log('数据',res)
this.resultlist = res.data.data.customMenu
this.data.page++
})
},
clickNextPage: function () { //给隐藏div绑定click事件
axios.get('/api/graphql?', {
params: {
query: customMenu
}
}).then(res => { //接口返回数据
console.log('数据',res)
if (this.resultlist){
var curList = res.data.data.customMenu;
this.resultlist = this.resultlist.concat(curList);
this.data.page++;
console.log('pages',this.data.page)
}
})
},
}
}
好了 经过测试完美收官！！！