Mobile Android and IOS Development Framework Framework7 Tutorial - Infinite Scrolling

Infinite scrolling is used to load new content or perform other operations when the page is scrolled near the bottom.

Infinite scroll HTML structure

You just add the "infinite-scroll" class to the scrollable container, usually the page scroll area -  <div class="page-content">:

1. <divclass="page"> 
2.     <divclass="page-content infinite-scroll"data-distance="100">  
3.         ... 
4.     </div>
5. </div>

copy

in:

• div class="page-content infinite-scroll"is our infinite scroll container

• data-distanceThe property is used to configure how far the page is scrolled from the bottom to trigger the infinite scroll event, the default is 50  (px)

  data-distance attribute allows to configure distance from the bottom of page (in px) to trigger infinite scroll event. By default, if note specified, it is 50 (px)

Infinite Scroll On Top

If you need to use infinite scroll on top the page (when it scrolled to top), you need to add additional "infinite-scroll-top" class to "page-content":

1. <divclass="page"> 
2.     <divclass="page-content infinite-scroll infinite-scroll-top"> 
3.         ... 
4.     </div>
5. </div>

copy

infinite scroll event

Event (Event) Object (Target) Description (Description)

infinite	Infinite scrollable container <div class="page-content infinite-scroll">	The event will be triggered when the page scrolls to a certain distance from the bottom (configurable in data-distance)

Infinite scroll API

There are 2 App methods:

myApp.attachInfiniteScroll(container) - add an infinite scroll event listener to the specified HTML element container

• parameters - HTML elements or CSS selectors representing the infinite scroll container. required.

myApp.detachInfiniteScroll(container) - removes the infinite scroll event listener from the specified HTML element container

• parameters - HTML elements or CSS selectors representing the infinite scroll container. required.

注意，仅在你使用myApp.detachInfiniteScroll方法删除过事件监听器后，才可能需要使用myApp.attachInfiniteScroll方法，因为无限滚动组件的事件监听器会在“pageInit”时被自动添加。

示例

实例预览

1. <div class="page-content infinite-scroll">
2.   <div class="list-block">
3.     <ul>
4.       <li class="item-content">
5.         <div class="item-inner">
6.           <div class="item-title">Item 1</div>
7.         </div>
8.       </li>
9.       <li class="item-content">
10.         <div class="item-inner">
11.           <div class="item-title">Item 2</div>
12.         </div>
13.       </li>
14.       ...
15.       <li class="item-content">
16.         <div class="item-inner">
17.           <div class="item-title">Item 20</div>
18.         </div>
19.       </li>
20.     </ul>
21.   </div>
22.   <!-- 加载提示符 -->
23.   <div class="infinite-scroll-preloader">
24.     <div class="preloader"></div>
25.   </div>
26. </div>

复制

1. .infinite-scroll-preloader {
2.   margin-top:-20px;
3.   margin-bottom: 10px;
4.   text-align: center;
5. }
6. .infinite-scroll-preloader .preloader {
7.   width:34px;
8.   height:34px;
9. }

复制

 

1. var myApp = new Framework7(); 
2.  
3. var $$ = Dom7;
4.  
5. // 加载flag
6. var loading = false;
7.  
8. // 上次加载的序号
9. var lastIndex = $$('.list-block li').length;
10.  
11. // 最多可加载的条目
12. var maxItems = 60;
13.  
14. // 每次加载添加多少条目
15. var itemsPerLoad = 20;
16.  
17. // 注册'infinite'事件处理函数
18. $$('.infinite-scroll').on('infinite', function () {
19.  
20.   // 如果正在加载，则退出
21.   if (loading) return;
22.  
23.   // 设置flag
24.   loading = true;
25.  
26.   // 模拟1s的加载过程
27.   setTimeout(function () {
28.     // 重置加载flag
29.     loading = false;
30.  
31.     if (lastIndex >= maxItems) {
32.       // 加载完毕，则注销无限加载事件，以防不必要的加载
33.       myApp.detachInfiniteScroll($$('.infinite-scroll'));
34.       // 删除加载提示符
35.       $$('.infinite-scroll-preloader').remove();
36.       return;
37.     }
38.  
39.     // 生成新条目的HTML
40.     var html = '';
41.     for (var i = lastIndex + 1; i <= lastIndex + itemsPerLoad; i++) {
42.       html += '<li class="item-content"><div class="item-inner"><div class="item-title">Item ' + i + '</div></div></li>';
43.     }
44.  
45.     // 添加新条目
46.     $$('.list-block ul').append(html);
47.  
48.     // 更新最后加载的序号
49.     lastIndex = $$('.list-block li').length;
50.   }, 1000);
51. });

复制