laravel 如何在我的 vue js 中实现无限滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43198442/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to implement infinite scroll in my vue js
提问by masterhunter
I currently learning combining laravel with vue. This page should be fetching post data from server and showing in user timeline. I am successfully get all data and display it. But i want to implement a infinite scroll into it but i had no idea how to do it. i had been tried many different way also not working. Maybe is my knowledge about vue is still fresh. Any suggestion for me?
我目前正在学习结合 laravel 和 vue。此页面应该从服务器获取帖子数据并显示在用户时间线中。我已成功获取所有数据并显示出来。但我想在其中实现无限滚动，但我不知道该怎么做。我已经尝试过很多不同的方法也没有奏效。也许是我对 vue 的了解还很新鲜。对我有什么建议吗？
Here is my original code :jsfiddle
这是我的原始代码：jsfiddle
Here is code i try to implement infinite scroll with this example.
这是我尝试使用此示例实现无限滚动的代码。
The scrolling symbol is showing but seem like the array did't not passing , the data still appear all in one time.
滚动符号正在显示，但似乎数组没有通过，数据仍然一次全部出现。
Once submitted /feedthe server will return array which contain post information. But i don't know how to passing into the list array.
一旦提交/feed，服务器将返回包含发布信息的数组。但我不知道如何传入列表数组。
Returned Array
返回的数组
In vue
在 vue
In route
途中
回答by Gabriel Robert
Installation:
安装：
npm install vue-infinite-scroll --save
Registration in your main.js:
在 main.js 中注册：
// register globally
var infiniteScroll = require('vue-infinite-scroll');
Vue.use(infiniteScroll)
// or for a single instance
var infiniteScroll = require('vue-infinite-scroll');
new Vue({
directives: {infiniteScroll}
})
Your html:
你的html：
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
...
</div>
You component:
您的组件：
var count = 0;
new Vue({
el: '#app',
data: {
data: [],
busy: false
},
methods: {
loadMore: function() {
this.busy = true;
setTimeout(() => {
for (var i = 0, j = 10; i < j; i++) {
this.data.push({ name: count++ });
}
this.busy = false;
}, 1000);
}
}
});
回答by ashish bansal
One solution would be to setup a locking mechanism to stop rapid requests to your backend. The lock would be enabled before a request is made, and then the lock would be disabled when the request has been completed and the DOM has been updated with the new content (which extends the size of your page).
一种解决方案是设置锁定机制来阻止对后端的快速请求。锁定将在发出请求之前启用，然后当请求完成且 DOM 已更新为新内容（这会扩展页面的大小）时，锁定将被禁用。
For example:
例如：
new Vue({
// ... your Vue options.
ready: function () {
var vm = this;
var lock = true;
window.addEventListener('scroll', function () {
if (endOfPage() && lock) {
vm.$http.get('/myBackendUrl').then(function(response) {
vm.myItems.push(response.data);
lock = false;
});
};
});
}; });
}; });
Another thing to keep in mind is that the scroll event is triggered more than you really need it to (especially on mobile devices), and you can throttle this event for improved performance. This can efficiently be done with requestAnimationFrame:
要记住的另一件事是，滚动事件的触发次数超出了您真正需要的次数（尤其是在移动设备上），您可以限制此事件以提高性能。这可以通过 requestAnimationFrame 有效地完成：
;(function() {
var throttle = function(type, name, obj) {
obj = obj || window;
var running = false;
var func = function() {
if (running) { return; }
running = true;
requestAnimationFrame(function() {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
/* init - you can init any event */
throttle ("scroll", "optimizedScroll");
})();
// handle event
window.addEventListener("optimizedScroll", function() {
console.log("Resource conscious scroll callback!");
});
回答by Toskan
based on @ashishbansal's answer
基于@ashishbansal 的回答
for vue js 2... note I used ecma script 6 mostly... if you want to use old notation you have to convert
对于 vue js 2...注意我主要使用 ecma 脚本 6...如果你想使用旧的表示法，你必须转换
ready is now mounted
准备好现在安装
mounted() {
let app = this;
let distanceStartLoading = 300; //start loading stuff before reaching the very bottom right...
var endOfPage = function endOfPage() {
let bottomOfWindow = document.getElementsByTagName('body')[0].scrollTop + window.innerHeight >= document.documentElement.offsetHeight - distanceStartLoading;
if (bottomOfWindow) {
return true;
} else {
return false;
}
}
;(function () {
var throttle = function (type, name, obj) {
obj = obj || window;
var running = false;
var func = function () {
if (running) {
return;
}
running = true;
requestAnimationFrame(function () {
obj.dispatchEvent(new CustomEvent(name));
running = false;
});
};
obj.addEventListener(type, func);
};
/* init - you can init any event */
throttle("scroll", "optimizedScroll");
})();
// handle event
window.addEventListener("optimizedScroll", function () {
console.log("scrolling but not endofpage");
if (endOfPage()) {
console.log("hellow");
}
;
});
},
回答by unnikked
If you are using vue.js a simple and quick solution is to use vue-infinite-scroll.
如果您使用的是 vue.js，一个简单快捷的解决方案是使用vue-infinite-scroll。
