移动端安卓和IOS开发框架Framework7教程-无限滚动

无限滚动用来在页面滚动到接近底部时加载新内容或进行其他操作。

无限滚动HTML结构

你只需在可滚动的容器上添加“infinite-scroll”类，一般是页面滚动区域 - <div class="page-content">:

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

复制

其中：

• div class="page-content infinite-scroll"是我们无限滚动的容器

• data-distance属性用来配置页面滚动到离底部多远时触发无限滚动事件，默认是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. <div class="page">
2.     <div class="page-content infinite-scroll infinite-scroll-top">
3.         ... 
4.     </div>
5. </div>

复制

无限滚动事件

事件（Event） 对象（Target） 描述（Description）

infinite	可无限滚动的容器<div class="page-content infinite-scroll">	事件会在页面滚动至距底部还有特定距离（可在data-distance中配置）时触发

无限滚动API

有2个App方法：

myApp.attachInfiniteScroll(container) - 为指定的HTML元素容器添加无限滚动事件监听器

• parameters - 表示无限滚动容器的HTML元素或CSS选择器。必选。

myApp.detachInfiniteScroll(container) - 从指定的HTML元素容器删除无限滚动事件监听器

• parameters - 表示无限滚动容器的HTML元素或CSS选择器。必选。

注意，仅在你使用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. });

复制