Framework7 - Yenile
Açıklama
Sayfa içeriğini çekerek yenilemek (yeniden yüklemek) için kullanılan özel bir bileşendir.
Aşağıdaki kod, sayfa içeriğinin nasıl yenileneceğini gösterir -
<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>Yenilemede aşağıdaki sınıflar kullanılır -
page-content- Ek bir yenilemek için çekme içeriği sınıfına sahiptir ve yenilemek için çekmeyi etkinleştirmek için gereklidir.
pull-to-refresh-layer- Görsel öğeyi yenilemek için çekmek için kullanılan gizli bir katmandır ve sadece bir ön yükleyici ve bir oktur.
data-ptr-distance = "55" - Bu, özel "yenilemek için çekme" tetikleme mesafesi ayarlamanıza olanak tanıyan ek özelliktir ve varsayılan değeri 44 pikseldir.
Olayları Yenilemek İçin Çekin
'Yenilemek için Çekin' bölümünde, aşağıdaki tabloda verilen bazı JavaScript olayları vardır -
| S.No | Etkinlik Açıklaması | Hedef |
|---|---|---|
| 1 | pullstart İçeriği yenilemek için çekmeye başladığınızda tetiklenecektir. |
İçeriği Yenilemek İçin Çekin. |
| 2 | pullmove İçeriği yenilemek için çektiğinizde tetiklenir. |
İçeriği Yenilemek İçin Çekin. |
| 3 | pullend İçeriği yenilemek için çekme düğmesini her bıraktığınızda tetiklenecektir. |
İçeriği Yenilemek İçin Çekin. |
| 4 | refresh Bu olay, yenilemek için çekme "yenileme" durumuna girdiğinde tetiklenecektir . |
İçeriği Yenilemek İçin Çekin. |
| 5 | refreshdone Yenilendikten sonra tetiklenecek ve başlangıç durumuna geri dönecektir. Bu, pullToRefreshDone yöntemi çağrıldıktan sonra yapılacaktır . |
İçeriği Yenilemek İçin Çekin. |
Yenilemek için Çek ile kullanılabilen Uygulamanın yöntemleri vardır.
| S.No | Uygulamanın Yöntemleri ve Açıklaması |
|---|---|
| 1 | myApp.pullToRefreshDone(ptrContent) Yenilemek için çekme içeriğini sıfırlamak için kullanılır . |
| 2 | myApp.pullToRefreshTrigger(ptrContent) İçeriği yenilemek için belirtilen çekmede yenilemeyi tetiklemek için kullanılır . |
| 3 | myApp.destroyPullToRefresh(ptrContent) İçeriği yenilemek için belirtilen çekmede yenilemek için çekmeyi yok etmek / devre dışı bırakmak için kullanılır . |
| 4 | myApp.initPullToRefresh(ptrContent) İçeriği yenilemek için çekmeyi başlatmak / etkinleştirmek için kullanılır . |
Nerede ptrContent için kullanılır HTMLElement veya dize sıfırlamak için / tetiği veya devre dışı çekme-to-yenileme-içeriğe / etkinleştirin.
Misal
Aşağıdaki örnek, bir sayfa içeriğinin yenilenmesini başlatan yenileme bileşeninin kullanımını göstermektedir -
<!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>Çıktı
Yukarıda verilen kodun nasıl çalıştığını görmek için aşağıdaki adımları gerçekleştirelim -
Yukarıda verilen HTML kodunu farklı kaydedin pull_to_refresh.html sunucunuzun kök klasöründeki dosya.
Bu HTML dosyasını http: //localhost/pull_to_refresh.html olarak açın ve çıktı aşağıda gösterildiği gibi görüntülenir.
Kullanıcı aşağı çektiğinde, sayfa içerikle yenilenecektir.