Framework7 Tutorial
Framework7 Components
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
Framework7 Components
- Framework7 - Lazy Load
- Framework7 - Notifications
- Framework7 - Message Bar
- Framework7 - Messages
- Framework7 - Infinite Scroll
- Framework7 - Refresh
- Framework7 - Calendar
- Framework7 - Picker
- Framework7 - Autocomplete
- Framework7 - Photo Browser
- Framework7 - Swiper Slider
- Framework7 - Tabs
- Framework7 - Forms
- Framework7 - Action Button
- Framework7 - Buttons
- Framework7 - Chips
- Framework7 - Cards
- Framework7 - Accordion
- Framework7 - List Views
- Framework7 - Progress Bar
- Framework7 - Preloaders
- Framework7 - Overlays
- Framework7 - Layout Grid
- Framework7 - Content Block
- Framework7 - Side Panels
- Framework7 - Status Bar
- Framework7 - Search Bar
- Framework7 - Toolbars
- Framework7 - Navbars
- Framework7 - Layouts
Framework7 Styling
Framework7 Templates
Framework7 Fast Clicks
Framework7 Useful Resources
Selected Reading
- Who is Who
- Computer Glossary
- HR Interview Questions
- Effective Resume Writing
- Questions and Answers
- UPSC IAS Exams Notes
Framework7 - Infinite Scroll
Framework7 - Infinite Scroll
Description
The Infinite Scroll allows you to load additional content and performs the required actions when the page is near to the bottom.
The following HTML layout shows the infinite scroll −
<span class = "page">
<span class = "page-content infinite-scroll" data-distance = "100">
...
</span>
</span>
The above layout contains the following classes −
page-content infinite-scroll − It is used for infinite scroll container.
data-distance − This attribute allows you to configure distance from the bottom of page (in px) to trigger infinite scroll event and its default value is 50px.
If you want to use infinite scroll on top the page, you need to add additional "infinite-scroll-top" class to "page-content" −
<span class = "page">
<span class = "page-content infinite-scroll infinite-scroll-top">
...
</span>
</span>
Infinite Scroll Events
infinite − It is used to trigger when page scroll reaches specified distance to the bottom. It will be target by span class = "page-content infinite-scroll".
There are two App s methods that can be used with infinite scroll container −
To add infinite scroll event pstener to the specified HTML container, use the following method −
myApp.attachInfiniteScroll(container)
You can remove the infinite scroll event pstener from the specified HTML container by using the following method −
myApp.detachInfiniteScroll(container)
Where parameters are required options used as HTMLElement or string for infinite scroll container.
Example
The following example demonstrates the infinite scroll that loads the additional content when the 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>
<pnk rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.min.css" />
<pnk rel = "stylesheet"
href = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/css/framework7.ios.colors.min.css" />
</head>
<body>
<span class = "views">
<span class = "view view-main">
<span class = "navbar">
<span class = "navbar-inner">
<span class = "left"> </span>
<span class = "center spding">Infinite Scroll</span>
<span class = "right"> </span>
</span>
</span>
<span class = "pages navbar-through">
<span data-page = "home" class = "page">
<span class = "page-content infinite-scroll">
<span class = "pst-block">
<ul>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 1</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 2</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 3</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 4</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 5</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 6</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 7</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 8</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 9</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 10</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 11</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 12</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 13</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 14</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 15</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 16</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 17</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 18</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 19</span>
</span>
</p>
<p class = "item-content">
<span class = "item-inner">
<span class = "item-title">Item 20</span>
</span>
</p>
</ul>
</span>
<span class = "infinite-scroll-preloader">
<span class = "preloader"></span>
</span>
</span>
</span>
</span>
</span>
</span>
<script type = "text/javascript"
src = "https://cdnjs.cloudflare.com/ajax/pbs/framework7/1.4.2/js/framework7.min.js"></script>
<style>
.infinite-scroll-preloader {
margin-top:-20px;
margin-bottom:10px;
text-apgn: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 = $$( .pst-block p ).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 += <p class = "item-content">
<span class = "item-inner">
<span class = "item-title">
Item + i +
</span>
</span>
</p> ;
}
// Append new items
$$( .pst-block ul ).append(html);
// Update last loaded index
lastIndex = $$( .pst-block p ).length;
}, 1000);
});
</script>
</body>
</html>
Output
Let us carry out the following steps to see how the above given code works −
Save the above given HTML code as infinite_scroll.html file in your server root folder.
Open this HTML file as http://localhost/infinite_scroll.html and the output is displayed as shown below.
The example allows loading of additional content when your page scroll reaches specified distance to the bottom.