Framework7-infinite-scroll
提供：Dev Guides
Framework7-無限スクロール
説明
Infinite Scrollを使用すると、ページが最下部に近づいたときに追加のコンテンツをロードして必要なアクションを実行できます。
次のHTMLレイアウトは、無限スクロールを示しています-
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>上記のレイアウトには、次のクラスが含まれています-
- page-content infinite-scroll -無限スクロールコンテナに使用されます。
- data-distance -この属性により、ページの下部からの距離（px）を設定して、無限スクロールイベントをトリガーできます。デフォルト値は* 50 * pxです。
ページの上部で無限スクロールを使用する場合は、_ "page-content" に "infinite-scroll-top" _クラスを追加する必要があります-
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>無限スクロールイベント
無限-ページのスクロールが指定された最下部までの距離に達したときにトリガーするために使用されます。 _div class = "page-content infinite-scroll" _のターゲットになります。
無限スクロールコンテナで使用できる2つのアプリの方法があります-
指定されたHTMLコンテナに無限スクロールイベントリスナーを追加するには、次の方法を使用します-
myApp.attachInfiniteScroll(container)あなたは、次の方法を使用して、指定されたHTMLコンテナから無限スクロールイベントリスナーを削除することができます-
myApp.detachInfiniteScroll(container)_parameters_は、無限スクロールコンテナの_HTMLElement_または_string_として使用される必須オプションです。
例
次の例は、ページのスクロールが下部に近いときに追加のコンテンツをロードする無限スクロールを示しています-
<!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_scrolll ファイルとしてサーバーのルートフォルダーに保存します。
- このHTMLファイルをhttp：//localhost/infinite_scrolllとして開くと、出力は以下のように表示されます。
- この例では、ページのスクロールが指定された最下部までの距離に達したときに追加のコンテンツをロードできます。
