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.

<div class = "pull-to-refresh-content">
2

pullmove

İçeriği yenilemek için çektiğinizde tetiklenir.

İçeriği Yenilemek İçin Çekin.

<div class="pull-to-refresh-content">
3

pullend

İçeriği yenilemek için çekme düğmesini her bıraktığınızda tetiklenecektir.

İçeriği Yenilemek İçin Çekin.

<div class="pull-to-refresh-content">
4

refresh

Bu olay, yenilemek için çekme "yenileme" durumuna girdiğinde tetiklenecektir .

İçeriği Yenilemek İçin Çekin.

<div class="pull-to-refresh-content">
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.

<div class="pull-to-refresh-content">

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.