Учебники

Framework7 — Обновить

Декабрь 31, 2018

Это специальный компонент, используемый для обновления (перезагрузки) содержимого страницы путем ее извлечения.

Следующий код показывает, как обновить содержимое страницы — 

<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>

Следующие классы используются в обновлении —

  • page-content — имеет дополнительный класс pull-to-refresh-content и требуется для включения pull-to-refresh.

  • pull-to-refresh-layer — это скрытый слой, который используется для обновления, чтобы обновить визуальный элемент, и это просто предварительный загрузчик и стрелка.

  • data-ptr-distance = «55» — это дополнительный атрибут, который позволяет вам установить произвольное расстояние запуска «pull to refresh», и его значение по умолчанию равно 44px.

page-content — имеет дополнительный класс pull-to-refresh-content и требуется для включения pull-to-refresh.

pull-to-refresh-layer — это скрытый слой, который используется для обновления, чтобы обновить визуальный элемент, и это просто предварительный загрузчик и стрелка.

data-ptr-distance = «55» — это дополнительный атрибут, который позволяет вам установить произвольное расстояние запуска «pull to refresh», и его значение по умолчанию равно 44px.

Потяните, чтобы обновить события

В «Pull to Refresh» есть некоторые события JavaScript, которые приведены в следующей таблице:

S.No Описание события цель
1

pullstart

Он будет срабатывать всякий раз, когда вы начинаете тянуть, чтобы обновить контент.

Потяните, чтобы обновить содержимое. 

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

pullmove

Это срабатывает, когда вы тянете, чтобы обновить содержимое.

Потяните, чтобы обновить содержимое. 

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

pullend

Он будет срабатывать всякий раз, когда вы отпускаете команду pull для обновления содержимого.

Потяните, чтобы обновить содержимое. 

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

обновление

Это событие будет запущено, когда запрос на обновление входит в состояние «обновление» .

Потяните, чтобы обновить содержимое. 

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

refreshdone

Он будет запущен после обновления и вернется в исходное состояние. Это будет сделано после вызова метода pullToRefreshDone .

Потяните, чтобы обновить содержимое. 

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

pullstart

Он будет срабатывать всякий раз, когда вы начинаете тянуть, чтобы обновить контент.

Потяните, чтобы обновить содержимое.

pullmove

Это срабатывает, когда вы тянете, чтобы обновить содержимое.

Потяните, чтобы обновить содержимое.

pullend

Он будет срабатывать всякий раз, когда вы отпускаете команду pull для обновления содержимого.

Потяните, чтобы обновить содержимое.

обновление

Это событие будет запущено, когда запрос на обновление входит в состояние «обновление» .

Потяните, чтобы обновить содержимое.

refreshdone

Он будет запущен после обновления и вернется в исходное состояние. Это будет сделано после вызова метода pullToRefreshDone .

Потяните, чтобы обновить содержимое.

Существуют методы приложения, которые можно использовать с Pull для обновления.

S.No Методы и описание приложения
1

myApp.pullToRefreshDone (ptrContent)

Он используется для сброса содержимого « pull-to-refresh» .

2

myApp.pullToRefreshTrigger (ptrContent)

Он используется для запуска обновления по указанному запросу для обновления содержимого .

3

myApp.destroyPullToRefresh (ptrContent)

Он используется для уничтожения / отключения извлечения для обновления при заданном извлечении для обновления содержимого .

4

myApp.initPullToRefresh (ptrContent)

Он используется для инициализации / включения функции извлечения для обновления содержимого .

myApp.pullToRefreshDone (ptrContent)

Он используется для сброса содержимого « pull-to-refresh» .

myApp.pullToRefreshTrigger (ptrContent)

Он используется для запуска обновления по указанному запросу для обновления содержимого .

myApp.destroyPullToRefresh (ptrContent)

Он используется для уничтожения / отключения извлечения для обновления при заданном извлечении для обновления содержимого .

myApp.initPullToRefresh (ptrContent)

Он используется для инициализации / включения функции извлечения для обновления содержимого .

Где ptrContent используется для HTMLElement или строки для извлечения-обновления содержимого для сброса / запуска или отключения / включения.

пример

В следующем примере демонстрируется использование компонента refresh, который инициирует обновление содержимого страницы. 

<!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>

Выход

Давайте выполним следующие шаги, чтобы увидеть, как работает приведенный выше код —

Сохраните приведенный выше HTML-код как файл pull_to_refresh.html в корневой папке вашего сервера.

Откройте этот HTML-файл как http: //localhost/pull_to_refresh.html, и вывод отобразится, как показано ниже.

Когда пользователь отключается, страница обновляется с содержанием.

44
Share: