Framework7 - Segarkan
Deskripsi
Ini adalah komponen khusus yang digunakan untuk menyegarkan (memuat ulang) konten halaman dengan menariknya.
Kode berikut menunjukkan cara menyegarkan konten halaman -
<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>Kelas-kelas berikut digunakan dalam penyegaran -
page-content- Memiliki kelas tarik-untuk-menyegarkan-konten tambahan dan diperlukan untuk mengaktifkan tarik untuk menyegarkan.
pull-to-refresh-layer- Ini adalah lapisan tersembunyi, yang digunakan untuk menarik untuk menyegarkan elemen visual dan itu hanya prapemuat dan panah.
data-ptr-distance = "55" - Ini adalah atribut tambahan yang memungkinkan Anda menyetel jarak pemicu 'tarik untuk menyegarkan' khusus dan nilai defaultnya adalah 44 piksel.
Tarik Untuk Menyegarkan Acara
Dalam 'Tarik untuk Menyegarkan' ada beberapa peristiwa JavaScript, yang diberikan dalam tabel berikut -
| S.No | Deskripsi acara | Target |
|---|---|---|
| 1 | pullstart Ini akan dipicu setiap kali Anda mulai menarik untuk menyegarkan konten. |
Tarik Untuk Menyegarkan konten. |
| 2 | pullmove Ini dipicu saat Anda menarik untuk menyegarkan konten. |
Tarik Untuk Menyegarkan konten. |
| 3 | pullend Ini akan dipicu setiap kali Anda melepaskan tarikan untuk menyegarkan konten. |
Tarik Untuk Menyegarkan konten. |
| 4 | refresh Peristiwa ini akan dipicu saat tarikan untuk menyegarkan masuk ke status "menyegarkan" . |
Tarik Untuk Menyegarkan konten. |
| 5 | refreshdone Ini akan dipicu setelah di-refresh dan kembali ke keadaan awal. Ini akan dilakukan setelah memanggil metode pullToRefreshDone . |
Tarik Untuk Menyegarkan konten. |
Ada metode App yang dapat digunakan dengan Pull to Refresh.
| S.No | Metode & Deskripsi Aplikasi |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) Ini digunakan untuk mengatur ulang konten tarik-untuk-menyegarkan . |
| 2 | myApp.pullToRefreshTrigger(ptrContent) Ini digunakan untuk memicu penyegaran pada tarikan tertentu untuk menyegarkan konten . |
| 3 | myApp.destroyPullToRefresh(ptrContent) Ini digunakan untuk menghancurkan / menonaktifkan tarikan untuk menyegarkan pada tarikan tertentu untuk menyegarkan konten . |
| 4 | myApp.initPullToRefresh(ptrContent) Ini digunakan untuk menginisialisasi / mengaktifkan tarik untuk menyegarkan konten . |
Di mana ptrContent digunakan untuk HTMLElement atau string untuk menarik-untuk-menyegarkan-konten untuk mengatur ulang / memicu atau menonaktifkan / mengaktifkan.
Contoh
Contoh berikut menunjukkan penggunaan komponen penyegaran yang memulai penyegaran konten halaman -
<!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>Keluaran
Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -
Simpan kode HTML yang diberikan di atas sebagai pull_to_refresh.html file di folder root server Anda.
Buka file HTML ini sebagai http: //localhost/pull_to_refresh.html dan hasilnya ditampilkan seperti di bawah ini.
Saat pengguna menarik ke bawah, halaman akan disegarkan dengan konten.