Description
It allows to load additional content and performs required actions when page is near to the bottom.The following HTML layout shows the infinite scroll:
<div class="page"> <div class="page-content infinite-scroll" data-distance="100"> ... </div> </div>The above layout containts following classes:
- page-content infinite-scroll: It is used for infinite scroll container.
- data-distance: This attribute allows you configure distance from the bottom of page (in px) to trigger infinite scroll event and its default value is 50px.
<div class="page"> <div class="page-content infinite-scroll infinite-scroll-top"> ... </div> </div>
Infinite Scroll Events
infinite: It is used to trigger when page scroll reaches specified distance to the bottom. It will be target by div class="page-content infinite-scroll".There are two App's methods that can be used with infinite scroll container:
To add infinite scroll event listener to the specified HTML container use the below method:
myApp.attachInfiniteScroll(container)You can remove the infinite scroll event listener from the specified HTML container by using the below method:
myApp.detachInfiniteScroll(container)Where parameters are required options used as HTMLElement or string for infinite scroll container.
Example:
The below example demonstrates the infinite scroll that loads the additional content when page scroll is near to the bottom:<!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> <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>
Output
Let's carry out the following steps to see how above code works:-
Save above HTML code as infinite_scroll.html file in your server root folder.
-
Open this HTML file as http://localhost/infinite_scroll.html and output as below gets displayed.
- The example allows loading of additional content when your page scroll reaches specified distance to the bottom.
No comments:
Post a Comment