내 vue js에서 무한 스크롤을 구현하는 방법

Question

현재 vara와 laravel을 함께 사용하는 방법을 배우고 있습니다. 이 페이지는 서버에서 게시물 데이터를 가져 와서 사용자 타임 라인에 표시해야합니다. 나는 모든 데이터를 성공적으로 가져 와서 그것을 보여줍니다. 하지만 그것에 무한 스크롤 구현하고 싶지만 그것을 어떻게 해야할지 모르겠다. 나는 여러 가지 방법으로 시도해 봤지만 일하지도 않았다. 어쩌면 vue에 대한 나의 지식은 여전히 ​​신선합니다. 나에 대한 제안이 있니? 여기 jsfiddle

내가이 example로 무한 스크롤을 구현하려고 코드 :

여기에 내 원래의 코드입니다.

jsfiddle 2

스크롤링 기호는 표시하지만 배열이 통과하지 did't처럼 데이터가 여전히 한 번에 모두 나타날 것입니다.

일단 /feed을 제출하면 서버는 게시 정보가 포함 된 배열을 반환합니다. 하지만 목록 배열로 전달하는 방법을 모르겠습니다.

반환 경로 에서 VUE

에서 배열

Answer 1

설치 : 당신의 main.js에서

npm install vue-infinite-scroll --save 

등록 :

// 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); 
    } 
    } 
}); 

Answer 2

하나의 솔루션은 설치에 백엔드에 대한 신속한 요청을 중지 할 수있는 잠금 장치가 될 것입니다. 요청이 이루어지기 전에 잠금이 활성화 된 다음 요청이 완료되고 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; 
    }); 
    }; 
}); 

}; }});

또 다른 사실은 스크롤 이벤트가 실제로 (특히 모바일 장치에서) 필요한 것보다 많이 발생한다는 것입니다. 성능 향상을 위해이 이벤트를 조절할 수 있습니다. 이 효율적으로 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!"); 
}); 

Answer 3

당신이 간단하고 빠른 해결을 vue.js 사용하는 경우 vue-infinite-scroll를 사용하는 것입니다.