Framework7 - Làm mới
Sự miêu tả
Nó là một thành phần đặc biệt được sử dụng để làm mới (tải lại) nội dung trang bằng cách kéo nó.
Đoạn mã sau cho biết cách làm mới nội dung trang:
<div class = "page">
<!-- Page content should have additional "pull-to-refresh-content" class -->
<div class = "page-content pull-to-refresh-content" data-ptr-distance = "55">
<!-- Default pull to refresh layer-->
<div class = "pull-to-refresh-layer">
<div class = "preloader"></div>
<div class = "pull-to-refresh-arrow"></div>
</div>
<!-- usual content below -->
<div class = "list-block">
...
</div>
</div>Các lớp sau được sử dụng trong làm mới:
page-content- Nó có thêm một lớp nội dung kéo để làm mới và yêu cầu của nó để cho phép kéo để làm mới.
pull-to-refresh-layer- Nó là một lớp ẩn, được sử dụng để kéo để làm mới phần tử hình ảnh và nó chỉ là một trình tải trước và một mũi tên.
data-ptr-distance = "55" - Đây là thuộc tính bổ sung cho phép bạn đặt khoảng cách kích hoạt 'kéo để làm mới' tùy chỉnh và giá trị mặc định của nó là 44px.
Kéo để làm mới sự kiện
Trong 'Kéo để Làm mới' có một số sự kiện JavaScript, được đưa ra trong bảng sau:
| S.Không | Sự kiện & Mô tả | Mục tiêu |
|---|---|---|
| 1 | pullstart Nó sẽ được kích hoạt bất cứ khi nào bạn bắt đầu kéo để làm mới nội dung. |
Kéo để làm mới nội dung. |
| 2 | pullmove Nó được kích hoạt khi bạn đang kéo để làm mới nội dung. |
Kéo để làm mới nội dung. |
| 3 | pullend Nó sẽ được kích hoạt bất cứ khi nào bạn thả kéo để làm mới nội dung. |
Kéo để làm mới nội dung. |
| 4 | refresh Sự kiện này sẽ được kích hoạt khi kéo để làm mới chuyển sang trạng thái "làm mới" . |
Kéo để làm mới nội dung. |
| 5 | refreshdone Nó sẽ được kích hoạt sau khi nó được làm mới và nó trở lại trạng thái ban đầu. Điều này sẽ được thực hiện sau khi gọi phương thức pullToRefreshDone . |
Kéo để làm mới nội dung. |
Có các phương pháp của Ứng dụng có thể được sử dụng với Kéo để làm mới.
| S.Không | Phương thức & Mô tả của Ứng dụng |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) Nó được sử dụng để thiết lập lại nội dung kéo để làm mới . |
| 2 | myApp.pullToRefreshTrigger(ptrContent) Nó được sử dụng để kích hoạt làm mới nội dung kéo để làm mới được chỉ định . |
| 3 | myApp.destroyPullToRefresh(ptrContent) Nó được sử dụng để hủy / vô hiệu hóa pull to refresh trên nội dung pull to refresh cụ thể . |
| 4 | myApp.initPullToRefresh(ptrContent) Nó được sử dụng để khởi tạo / cho phép kéo để làm mới nội dung . |
Trong đó ptrContent được sử dụng để HTMLElement hoặc chuỗi để kéo để làm mới nội dung để đặt lại / kích hoạt hoặc tắt / bật.
Thí dụ
Ví dụ sau minh họa việc sử dụng thành phần làm mới để bắt đầu làm mới nội dung trang:
<!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>Pull To Refresh</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>
<div class="views">
<div class="view view-main">
<div class="pages">
<div data-page="home" class="page navbar-fixed">
<div class="navbar">
<div class="navbar-inner">
<div class="left"> </div>
<div class="center">Pull To Refresh</div>
<div class="right"> </div>
</div>
</div>
<div class="page-content pull-to-refresh-content">
<div class="pull-to-refresh-layer">
<div class="preloader"></div>
<div class="pull-to-refresh-arrow"></div>
</div>
<div class="list-block media-list">
<ul>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/apple.png" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">apple</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/froots_img.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">strawberry</div>
</div>
</div>
</li>
<li class="item-content">
<div class="item-media"><img src="/framework7/images/mango.jpg" width="44"></div>
<div class="item-inner">
<div class="item-title-row">
<div class="item-title">Mango</div>
</div>
</div>
</li>
</ul>
<div class="list-block-label">
<p>Just pull page down to let the magic happen.</p>
</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>
<script>
var myApp = new Framework7();
var $$ = Dom7;
// Dummy Content
var fruits = ['mango', 'orange', 'watermelon', 'banana'];
// Pull to refresh content
var ptrContent = $$('.pull-to-refresh-content');
// Add 'refresh' listener on it
ptrContent.on('refresh', function (e) {
// Emulate 2s loading
setTimeout(function () {
var picURL = 'images/Fruit.jpg' + Math.round(Math.random() * 100);
var fruit = fruits[Math.floor(Math.random() * fruits.length)];
var itemHTML = '<li class="item-content">' +
'<div class="item-media"><img src="/framework7/images/Fruit.jpg" width="44"/></div>' +
'<div class="item-inner">' +
'<div class="item-title-row">' +
'<div class="item-title">' + fruit + '</div>' +
'</div>' + '</div>' + '</li>';
// Prepend new list element
ptrContent.find('ul').prepend(itemHTML);
// When loading done, we need to reset it
myApp.pullToRefreshDone();
}, 2000);
});
</script>
</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 pull_to_refresh.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/pull_to_refresh.html và kết quả được hiển thị như hình dưới đây.
Khi người dùng kéo xuống, trang sẽ được làm mới với nội dung.