Навігація

Потягніть, щоб оновити

Макет PTR

<div class="page">
  <!-- Вміст сторінки повинен мати додатковий клас  "ptr-content"  -->
  <div class="page-content ptr-content" data-ptr-distance="55" data-ptr-mousewheel="true">
    <!-- попередній завантажувач pull to refresh за замовчуванням -->
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>

    <!-- звичайний контент нижче -->
    <div class="list">
      ...
    </div>

    <!-- вкладений елемент з прокруткою -->
    <div class="my-scolling-content ptr-watch-scrollable">
      ...
    </div>

    <!-- ще один вкладений елемент з прокруткою -->
    <div class="another-scolling-content ptr-ignore">
      ...
    </div>
  </div>
</div>

• ptr-content — клас. Це потрібно, щоб увімкнути функцію оновлення
• div class="ptr-preloader" — прихований шар із потягуванням для оновлення візуальних елементів: попереднього завантажувача та стрілки
• data-ptr-distance="55" — додатковий атрибут, який дозволяє встановлювати настроювану відстань спрацьовування для оновлення. За замовчуванням (якщо не вказано) це 44 пікселя
• data-ptr-mousewheel="true" — додатковий атрибут, який дозволяє потягнути для оновлення за допомогою коліщатка миші (для настільних застосунків). Працює тільки для PTR top.
• ptr-watch-scrollable — додатковий клас, який необхідно додати до вкладених елементів, які можна прокручувати, щоб запобігти перетягування для оновлення при прокручуванні таких елементів
• ptr-ignore — додатковий клас, який необхідно додати до вкладених елементів, які можна прокручувати, або інших елементів, які запобігатимуть перетягненню для оновлення при прокручуванні таких елементів або переміщенні дотиком

PTR знизу

<div class="page">
  <!-- ptr-контент повинен мати додатковий клас  "ptr-bottom" -->
  <div class="page-content ptr-content ptr-bottom">
    <div class="list">
      ...
    </div>

    <!-- Pull to refresh попередній завантажувач переміщується вниз -->
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>
  </div>
</div>

PTR послідовність

Методи застосунку PTR

Методи та властивості PTR

// ініціалізувати PTR вручну
var ptr = app.ptr.create('.ptr-content');

// або використовуючи  get щоб отримати вже створений  примірник
var ptr = app.ptr.get('.ptr-content');

Властивості

Методи

Події PTR

Події DOM

Події екземплярів застосунку та PTR

Змінні CSS

.ios {
  --t4-ptr-preloader-size: 28px;
  --t4-ptr-size: 44px;
}
.md {
  --t4-ptr-preloader-size: 22px;
  --t4-ptr-size: 40px;
}
.md,
.md .dark,
.md [class*='color-'] {
  --t4-ptr-preloader-bg-color: var(--t4-md-surface-1);
  --t4-ptr-preloader-color: var(--t4-md-primary);
}

Приклади

PTR вгорі ("top")

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Pull To Refresh</div>
      </div>
    </div>
    <div class="page-content ptr-content" @ptr:refresh=${loadMore}>
      <div class="ptr-preloader">
        <div class="preloader"></div>
        <div class="ptr-arrow"></div>
      </div>
      <div class="list media-list">
        <ul>
          ${items.map((item) => $h`
          <li class="item-content">
            <div class="item-media"><img src=${item.picURL} width="44" /></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">${item.song}</div>
              </div>
              <div class="item-subtitle">${item.author}</div>
            </div>
          </li>
          `)}
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    // Фіктивний вміст
    const songs = ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'];
    const authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
    let items = [
      {
        picURL: 'https://cdn.techno4.io/placeholder/abstract-88x88-1.jpg',
        song: 'Yellow Submarine',
        author: 'Beatles',
      },
      {
        picURL: 'https://cdn.techno4.io/placeholder/abstract-88x88-2.jpg',
        song: 'Don\'t Stop Me Now',
        author: 'Queen',
      },
      {
        picURL: 'https://cdn.techno4.io/placeholder/abstract-88x88-3.jpg',
        song: 'Billie Jean',
        author: 'Michael Jackson',
      },
    ]

    const loadMore = (e, done) => {
      // Емулювати завантаження 2 с
      setTimeout(() => {
        const picURL = 'https://cdn.techno4.io/placeholder/abstract-88x88-' + (Math.floor(Math.random() * 10) + 1) + '.jpg';
        const song = songs[Math.floor(Math.random() * songs.length)];
        const author = authors[Math.floor(Math.random() * authors.length)];
        // Додати новий елемент
        items.push({
          picURL,
          song,
          author,
        });

        // Оновіть стан для повторного відтворення
        $update();

        // Коли завантаження завершено, нам потрібно скинути його
        done();
      }, 2000);
    }

    return $render;
  }
</script>

PTR внизу ("Bottom")

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-bg"></div>
      <div class="navbar-inner">
        <div class="title">Pull To Refresh Bottom</div>
      </div>
    </div>
    <div class="page-content ptr-content ptr-bottom" @ptr:refresh=${loadMore}>
      <div class="ptr-preloader">
        <div class="preloader"></div>
        <div class="ptr-arrow"></div>
      </div>
      <div class="list media-list">
        <ul>
          ${items.map((item) => $h`
          <li class="item-content">
            <div class="item-media"><img src=${item.picURL} width="44" /></div>
            <div class="item-inner">
              <div class="item-title-row">
                <div class="item-title">${item.song}</div>
              </div>
              <div class="item-subtitle">${item.author}</div>
            </div>
          </li>
          `)}
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
  export default (props, { $update }) => {
    // Фіктивний вміст

    const songs = ['Yellow Submarine', 'Don\'t Stop Me Now', 'Billie Jean', 'Californication'];
    const authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
    let items = [
      {
        picURL: 'https://cdn.techno4.io/placeholder/abstract-88x88-1.jpg',
        song: 'Yellow Submarine',
        author: 'Beatles',
      },
      {
        picURL: 'https://cdn.techno4.io/placeholder/abstract-88x88-2.jpg',
        song: 'Don\'t Stop Me Now',
        author: 'Queen',
      },
      {
        picURL: 'https://cdn.techno4.io/placeholder/abstract-88x88-3.jpg',
        song: 'Billie Jean',
        author: 'Michael Jackson',
      },
    ]

    const loadMore = (e, done) => {
      // Емулювати завантаження 2 с
      setTimeout(() => {
        const picURL = 'https://cdn.techno4.io/placeholder/abstract-88x88-' + (Math.floor(Math.random() * 10) + 1) + '.jpg';
        const song = songs[Math.floor(Math.random() * songs.length)];
        const author = authors[Math.floor(Math.random() * authors.length)];
        // Додати новий елемент

        items.push({
          picURL,
          song,
          author,
        });

        // Оновіть стан для повторного відтворення
        $update();

        // Коли завантаження завершено, нам потрібно скинути його
        done();
      }, 2000);
    }

    return $render;
  }
</script>