如何在我的vue js中实现无限滚动
如何在我的vue js中实现无限滚动
提问于 2017-04-04 12:44:01
回答 4
Stack Overflow用户
回答已采纳
发布于 2017-04-08 20:33:56
安装：
npm install vue-infinite-scroll --save在您的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}
})你的html：
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
...
</div>您的组件：
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);
}
}
});Stack Overflow用户
发布于 2017-04-07 17:27:25
一种解决方案是设置一个锁定机制来阻止对后端的快速请求。锁将在发出请求之前启用，然后在请求完成且DOM已使用新内容更新时禁用锁(这将扩展页面的大小)。
例如：
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;
});
};
});}；})；
另一件要记住的事情是，scroll事件被触发的次数超过了您真正需要它的次数(特别是在移动设备上)，您可以限制此事件以提高性能。这可以通过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!");
});Stack Overflow用户
发布于 2020-07-11 20:01:03
我也尝试了Vue- in scroll，但它在与Vue-router对齐时不能正常工作，至少在我的代码中是这样。所以我想出了我自己的解决方案。
<template>
<div ref="loadmore" class="infinite-container">
<!-- the inifite container -->
</div>
</template>
<script>
export default {
data() {
return {
timer: null,
// check if is in infinite procees
busy: false
}
},
methods: {
infiniteScrollHandler() {
//check if container's bttom is overflow screen
let bottomOff =
this.$refs.loadmore.getBoundingClientRect().bottom - screen.height;
if (bottomOff < 10 && !this.busy) {
console.log("loading... " + new Date());
this.busy = true;
// do something
this.busy = false;
}
},
setIntervalTimer() {
//check every 500 milliseconds
this.timer = setInterval(() => {
this.infiniteScrollHandler();
}, 500);
}
},
mounted() {
// set up timer on mounted
this.setIntervalTimer();
},
beforeDestroy() {
// do not forget clear the interval timer
clearInterval(this.timer);
}
};
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43198442
复制相关文章
相似问题