VUE实现页面滚动加载
vm = new Vue({
el: '#app',
data: {
items:[],
finished:false,
loading:false
},
mounted:function(){
window.addEventListener('scroll',this.handleScroll,true);
},
created: function () {
var that = this;
that.isApp = Utils.isAppTop();
that.getHouseList(); // 获取房源列表
},
computed: {
last_id: function(){
var $this = this;
var lastId = 0;
$.each($this.houseList,function (index,value) {
lastId = value.zf_id;
});
return lastId;
}
},
methods: {
handleScroll:function(e){
var $this = this;
console.log('handleScroll')
if ($this.getBottomOfWindow()) {
$this.getHouseList();
}
},
getBottomOfWindow:function () {
var viewH =$("#g-scrollview").height();//可见高度
var contentH =$("#g-scrollview").get(0).scrollHeight;//内容高度
var scrollTop =$("#g-scrollview").scrollTop();//滚动高度
return viewH + scrollTop + 200 >= contentH;
},
getHouseList: function(){
var $this = this;
console.log('getHouseList')
console.log($this.finished)
if($this.finished){
return false;
}
if($this.loading){
return;
}
$this.loading = true;
$.ajax({
url: api
data: {
last_id:$this.last_id
},
dataType: 'json',
method: 'GET',
success: function (res) {
var houseList = $this.houseList;
if (res.error_code == 0) {
var count = 0;
$.each(res.data,function (index,value) {
houseList.push(value);
count++;
});
console.log(houseList)
$this.houseList = houseList;
$this.$forceUpdate();
if (count == 0) {
$this.finished = true;
}
$this.loading = false;
}
YDUI.dialog.loading.close();
},
error: function () {
$this.loading = false;
YDUI.dialog.loading.close();
}
});
},
}
