फ्रेमवर्क 7 - अनंत स्क्रॉल
विवरण
अनंत स्क्रॉल आपको अतिरिक्त सामग्री लोड करने की अनुमति देता है और पृष्ठ के नीचे होने पर आवश्यक कार्रवाई करता है।
निम्न HTML लेआउट अनंत स्क्रॉल दिखाता है -
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>उपरोक्त लेआउट में निम्न वर्ग हैं -
page-content infinite-scroll - इसका उपयोग अनंत स्क्रॉल कंटेनर के लिए किया जाता है।
data-distance - यह विशेषता आपको अनंत स्क्रॉल ईवेंट को ट्रिगर करने के लिए पृष्ठ के निचले भाग (px में) से कॉन्फ़िगर करने की अनुमति देती है और इसका डिफ़ॉल्ट मान है 50पिक्सल।
यदि आप शीर्ष पृष्ठ पर अनंत स्क्रॉल का उपयोग करना चाहते हैं, तो आपको "पृष्ठ-सामग्री" में अतिरिक्त "अनंत-स्क्रॉल-टॉप" वर्ग जोड़ने की आवश्यकता है -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>अनंत स्क्रॉल इवेंट
infinite- इसका उपयोग तब ट्रिगर करने के लिए किया जाता है जब पृष्ठ स्क्रॉल नीचे तक निर्दिष्ट दूरी तक पहुंच जाता है। यह div class = "पेज-कंटेंट अनंत-स्क्रॉल" द्वारा लक्षित होगा ।
ऐप के दो तरीके हैं जिनका उपयोग अनंत स्क्रॉल कंटेनर के साथ किया जा सकता है -
निर्दिष्ट HTML कंटेनर में अनंत स्क्रॉल ईवेंट श्रोता को जोड़ने के लिए, निम्न विधि का उपयोग करें -
myApp.attachInfiniteScroll(container)आप निम्न विधि का उपयोग करके निर्दिष्ट HTML कंटेनर से अनंत स्क्रॉल ईवेंट श्रोता को निकाल सकते हैं -
myApp.detachInfiniteScroll(container)जहां मापदंडों की आवश्यकता होती है , अनंत स्क्रॉल कंटेनर के लिए HTMLElement या स्ट्रिंग के रूप में उपयोग किया जाता है ।
उदाहरण
निम्न उदाहरण अनंत स्क्रॉल को प्रदर्शित करता है जो पेज स्क्रॉल के नीचे होने पर अतिरिक्त सामग्री को लोड करता है -
<!DOCTYPE html>
<html>
<head>
<meta name = "viewport" content = "width = device-width, initial-scale = 1,
maximum-scale = 1, minimum-scale = 1, user-scalable = no, minimal-ui" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name = "apple-mobile-web-app-status-bar-style" content = "black" />
<title>infinite_scroll</title>
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.min.css" />
<link rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<div class = "views">
<div class = "view view-main">
<div class = "navbar">
<div class = "navbar-inner">
<div class = "left"> </div>
<div class = "center sliding">Infinite Scroll</div>
<div class = "right"> </div>
</div>
</div>
<div class = "pages navbar-through">
<div data-page = "home" class = "page">
<div class = "page-content infinite-scroll">
<div class = "list-block">
<ul>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 1</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 2</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 3</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 4</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 5</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 6</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 7</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 8</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 9</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 10</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 11</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 12</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 13</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 14</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 15</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 16</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 17</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 18</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 19</div>
</div>
</li>
<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">Item 20</div>
</div>
</li>
</ul>
</div>
<div class = "infinite-scroll-preloader">
<div class = "preloader"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/libs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
.infinite-scroll-preloader {
margin-top:-20px;
margin-bottom:10px;
text-align:center;
}
.infinite-scroll-preloader .preloader {
width:34px;
height:34px;
}
</style>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Loading flag
var loading = false;
// Last loaded index
var lastIndex = $$('.list-block li').length;
// Max items to load
var maxItems = 60;
// Append items per load
var itemsPerLoad = 20;
// Attach 'infinite' event handler
$$('.infinite-scroll').on('infinite', function () {
// Exit, if loading in progress
if (loading) return;
// Set loading flag
loading = true;
// Emulate 1s loading
setTimeout(function () {
// Reset loading flag
loading = false;
if (lastIndex >= maxItems) {
// Nothing more to load, detach infinite scroll events to prevent unnecessary loadings
myApp.detachInfiniteScroll($$('.infinite-scroll'));
// Remove preloader
$$('.infinite-scroll-preloader').remove();
return;
}
// Generate new items HTML
var html = '';
for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
html += '<li class = "item-content">
<div class = "item-inner">
<div class = "item-title">
Item ' + i + '
</div>
</div>
</li>';
}
// Append new items
$$('.list-block ul').append(html);
// Update last loaded index
lastIndex = $$('.list-block li').length;
}, 1000);
});
</script>
</body>
</html>उत्पादन
ऊपर दिए गए कोड कैसे काम करते हैं, यह देखने के लिए हम निम्नलिखित कदम उठाते हैं -
ऊपर दिए गए HTML कोड को इस प्रकार सेव करें infinite_scroll.html अपने सर्वर रूट फ़ोल्डर में फ़ाइल।
इस HTML फ़ाइल को http: //localhost/infinite_scroll.html के रूप में खोलें और आउटपुट नीचे दिखाया गया है।
जब आपका पृष्ठ स्क्रॉल नीचे तक निर्दिष्ट दूरी तक पहुँच जाता है तो उदाहरण अतिरिक्त सामग्री को लोड करने की अनुमति देता है।