Framework7 - Cuộn vô hạn
Sự miêu tả
Infinite Scroll cho phép bạn tải nội dung bổ sung và thực hiện các hành động cần thiết khi trang ở gần cuối.
Bố cục HTML sau đây hiển thị cuộn vô hạn -
<div class = "page">
<div class = "page-content infinite-scroll" data-distance = "100">
...
</div>
</div>Bố cục trên chứa các lớp sau:
page-content infinite-scroll - Nó được sử dụng cho vùng chứa cuộn vô hạn.
data-distance - Thuộc tính này cho phép bạn định cấu hình khoảng cách từ cuối trang (tính bằng px) để kích hoạt sự kiện cuộn vô hạn và giá trị mặc định của nó là 50px.
Nếu bạn muốn sử dụng cuộn vô hạn trên đầu trang, bạn cần thêm lớp bổ sung "vô hạn-cuộn-trên cùng" vào "nội dung trang" -
<div class = "page">
<div class = "page-content infinite-scroll infinite-scroll-top">
...
</div>
</div>Sự kiện cuộn vô hạn
infinite- Nó được sử dụng để kích hoạt khi cuộn trang đạt đến khoảng cách xác định đến cuối trang. Nó sẽ được nhắm mục tiêu bởi div class = "page-contentfinity-scroll" .
Có hai phương pháp của Ứng dụng có thể được sử dụng với vùng chứa cuộn vô hạn -
Để thêm trình xử lý sự kiện cuộn vô hạn vào vùng chứa HTML được chỉ định, hãy sử dụng phương pháp sau:
myApp.attachInfiniteScroll(container)Bạn có thể xóa trình xử lý sự kiện cuộn vô hạn khỏi vùng chứa HTML được chỉ định bằng cách sử dụng phương pháp sau:
myApp.detachInfiniteScroll(container)Trong đó tham số là các tùy chọn bắt buộc được sử dụng dưới dạng HTMLElement hoặc chuỗi cho vùng chứa cuộn vô hạn.
Thí dụ
Ví dụ sau minh họa cuộn vô hạn tải nội dung bổ sung khi cuộn trang gần cuối -
<!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>Đầu ra
Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -
Lưu mã HTML đã cho ở trên dưới dạng infinite_scroll.html tệp trong thư mục gốc máy chủ của bạn.
Mở tệp HTML này dưới dạng http: //localhost/infinite_scroll.html và kết quả được hiển thị như hình dưới đây.
Ví dụ cho phép tải nội dung bổ sung khi cuộn trang của bạn đạt đến khoảng cách xác định đến cuối.