vue-infinite-scroll
vue-infinite-scroll copied to clipboard
ElemeFE
添加之后，不停地调用加载方法
一直不停地调用加载方法。根本停不下来。。。
this.busy = true;
var _ = this;
$.get('getCollectList',vd,function(res){
if(res.falg == 'success'){
_.content = res.data.content;
_.busy = false;
}
感觉你们做的效果，体验都挺不错，可是我用却老是出问题，忧伤啊
我把主要代码贴出来，可以吗？
入口js
import Vue from 'vue'; import mystore from './myStoreIndex'; import infinit from 'vue-infinite-scroll'; Vue.use(infinit) new Vue(mystore);
methods
methods: { loadMore: function() { this.busy = true; var _ = this; var vd = {}; $.get('getCollectList',vd,function(res){ _ .content = res.data.content; _.busy = false; }) }
template `
{{data.title}}
就这样，每次请求了之后，就会继续重复请求。只要把busy改为false了之后，就会又执行loadMore方法。
已经解决了。 是因为我把_.busy =false，写到ajax里面去了，我调到外面来就好了。 但是我还是不明白，为什么放在ajax里面，会形成死循环，不停地刷。
`methods: {
loadMore: function() {
this.busy = true;
var _ = this;
var vd = {};
$.get('getCollectList',vd,function(res){ _ .content = res.data.content; _.busy = false; }) }`
1、上面的写法，会不停地刷。。 2、关于然后昨晚上说，把busy重置为false，写在ajax外面的时候，只要屏幕动一下，就会直接加载。不管是否到了页面底部。
@furybean 我大概找到原因了，当所有数据加载完API返回空的时候，list数组的长度就不会变动触发dom更新，从而重复请求，插件内部是根据高度变化来判断吗，所有数据请求完应该怎么处理，麻烦指教！
/**
* 从api获取数据
*/
loadData() {
this.loading = true
this.$http.get('/ajax/user/get_follow',{page: this.pageindex,pagesize:20}).then((response) => {
if (response.ok) {
this.onLoadData(response.data)
}
}, (response) => {
// error callback
});
},
/**
* 接收API获取的数据，并追加到当前列表
*/
onLoadData(data) {
this.pageindex++
let i=0, length=data.length, userItem
if (length > 0) {
for(; i<length; i++) {
userItem = data[i]
this.list.push(userItem)
}
} else {
this.allLoaded = true
}
this.loading = false
}
infinite-scroll-immediate-check 为 false也不行，本来是往下滚动10个像素再加载的，而现在是鼠标只要往上或者往下滚动都加载；感觉这个组件处理ajax异步回调是有bug的
回归本源，实现滚动加载其实没那么复杂，自己写的一个小例，亲测还行，望大家指正：
new Vue({
el: "#vue-app",
data: function () {
return {
busy: false,
};
},
methods: {
loadMore: function () {
var _self = this;
// 或ajax请求
setTimeout(function () {
console.log("has loaded");
_self.busy = false;
}, 1500)
}
},
ready: function () {
var _self = this;
window.addEventListener("scroll", function (e) {
if (window.scrollY >= document.body.scrollHeight - document.body.clientHeight - 20) {
if (!_self.busy) {
_self.busy = true;
_self.loadMore();
}
}
});
}
});
@lo6041 调用的方法不能有括号
<component v-infinite-scroll="loadMore"></component> ✅
<component v-infinite-scroll="loadMore()"></component> ❎
估计是个bug
猜测应该是scroll event触发太快了， 外面套一层debounce，效果要好很多
loadMore: debounce(function(e) {
do ajax
},500)
export function debounce(func, wait, immediate) {
var timeout, args, context, timestamp, result;
var later = function() {
// 据上一次触发时间间隔
var last = Date.now() - timestamp;
// 上次被包装函数被调用时间间隔last小于设定时间间隔wait
if (last < wait && last > 0) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
// 如果设定为immediate===true，因为开始边界已经调用过了此处无需调用
if (!immediate) {
result = func.apply(context, args);
if (!timeout) context = args = null;
}
}
};
return function() {
context = this;
args = arguments;
timestamp = Date.now();
var callNow = immediate && !timeout;
// 如果延时不存在，重新设定延时
if (!timeout) timeout = setTimeout(later, wait);
if (callNow) {
result = func.apply(context, args);
context = args = null;
}
return result;
};
}
