मेरे vue js

Question

में अनंत स्क्रॉल को कैसे कार्यान्वित करें मैं वर्तमान में vue के साथ लार्वेल को जोड़ना सीख रहा हूं। यह पृष्ठ सर्वर से पोस्ट डेटा लाने और उपयोगकर्ता समयरेखा में दिखाना चाहिए। मैं सफलतापूर्वक सभी डेटा प्राप्त कर रहा हूं और इसे प्रदर्शित करता हूं। लेकिन मैं इसमें एक अनंत स्क्रॉल लागू करना चाहता हूं लेकिन मुझे नहीं पता था कि इसे कैसे किया जाए। मुझे काम करने के कई अलग-अलग तरीके से भी कोशिश नहीं की गई थी। हो सकता है कि विय के बारे में मेरा ज्ञान अभी भी ताजा है। मेरे लिए कोई सुझाव? jsfiddle

यहाँ कोड मैं इस example साथ अनंत स्क्रॉल को लागू करने की कोशिश है:

यहाँ मेरी मूल कोड है।

jsfiddle 2

स्क्रॉल प्रतीक दिखा लेकिन जैसी सरणी गुजर नहीं समझे, डेटा अभी भी एक समय में सभी दिखाई लग रहा है।

एक बार /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

एक समाधान सेटअप करने के लिए एक ताला अपने बैकएंड के लिए तेजी से अनुरोध को रोकने के लिए तंत्र होगा। अनुरोध किए जाने से पहले लॉक सक्षम किया जाएगा, और अनुरोध को पूरा होने पर लॉक अक्षम कर दिया जाएगा और डीओएम को नई सामग्री (जो आपके पृष्ठ का आकार बढ़ाता है) के साथ अपडेट किया गया है।

उदाहरण के लिए:

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 उपयोग करने के लिए है।