プルダウン更新

プルダウン更新は、ページコンテンツの更新を開始するために使用できる特別なコンポーネントです。

プルダウン更新レイアウト

プルダウン更新をページに統合する方法を見てみましょう

<div class="page">
  <!-- Page content must have additional "ptr-content" class -->
  <div class="page-content ptr-content" data-ptr-distance="55" data-ptr-mousewheel="true">
    <!-- Default pull to refresh preloader-->
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>

    <!-- usual content below -->
    <div class="list">
      ...
    </div>

    <!-- nested scrollable element -->
    <div class="my-scolling-content ptr-watch-scrollable">
      ...
    </div>

    <!-- another nested scrollable element -->
    <div class="another-scolling-content ptr-ignore">
      ...
    </div>
  </div>
</div>

場所

ptr-content クラス。これはプルダウン更新を有効にするために必要です
div class="ptr-preloader" プルダウン更新の視覚要素（プリローダーと矢印）を含む非表示レイヤー
data-ptr-distance="55" カスタムのプルダウン更新トリガー距離を設定できる追加属性。デフォルト（指定しない場合）は44pxです
data-ptr-mousewheel="true" マウスホイールでプルダウン更新を有効にする追加属性（デスクトップアプリ用）。 PTRトップのみに機能します。
ptr-watch-scrollable - ネストされたスクロール可能な要素にプルダウン更新が発生しないようにするために、そのような要素に追加する必要がある追加クラスです
ptr-ignore - ネストされたスクロール可能な要素、またはそのような要素のスクロールやtouchmoveでプルダウン更新が発生しないようにするために追加する必要がある追加クラスです

下からのプルダウン更新

下からのプルのように動作させることも可能です。この場合、ptr-preloader 要素をページコンテンツの下部に移動し、プルダウン更新コンテンツに ptr-bottom クラスを追加する必要があります

<div class="page">
  <!-- ptr-content must have additional "ptr-bottom" class -->
  <div class="page-content ptr-content ptr-bottom">
    <div class="list">
      ...
    </div>

    <!-- Pull to refresh preloader moves to bottom -->
    <div class="ptr-preloader">
      <div class="preloader"></div>
      <div class="ptr-arrow"></div>
    </div>
  </div>
</div>

プルダウン更新シーケンス

ユーザーが ptr-content を下に引き始めると、 ptr-preloader は追加の ptr-pull-down クラスを受け取ります。

ユーザーが ptr-content を44px以上下に引くと（ ptr-preloader が完全に表示される場合）、 ptr-preloader は矢印の回転を変更して、リリース時の更新アクションをユーザーに通知する追加の ptr-pull-up クラスを受け取ります。

ユーザーが「ptr-pull-up」状態のときにプルダウン更新コンテンツをリリースすると、 ptr-preloader は追加の ptr-refreshing クラスを受け取ります。「更新中」状態では、矢印は非表示になり、ユーザーにはプリローダーインジケーターが表示されます。この段階では、おそらくAjaxリクエストを実行してページコンテンツを更新する必要があります。

プルダウン更新アプリメソッド

プルダウン更新コンテナーで使用できるアプリのメソッドはいくつかあります

app.ptr.create(el)- 指定されたHTML要素コンテナーでPTRを初期化します。

el - HTMLElement または string (CSSセレクター付き) - PTR要素 (ptr-content)。必須。

メソッドは、作成されたPTRインスタンスを返します

このメソッドは、ページの初期化後にptrコンテンツを追加した場合、または後で有効にする場合にのみ使用してください。それ以外の場合は、ページの初期化時に「ptr-content」要素が存在する場合、自動的に作成されます

app.ptr.destroy(el)- 指定されたHTML要素からPTRイベントリスナーを削除します

el - HTMLElement または string (CSSセレクター付き) - PTR要素 (ptr-content)。必須。

app.ptr.get(el)- HTML要素でPTRインスタンスを取得します

el - HTMLElement または string (CSSセレクター付き)。 PTR要素 (ptr-content)。

メソッドはPTRインスタンスを返します

app.ptr.done(el)- 指定されたPTRコンテンツ要素のPTR状態をリセットします

el - HTMLElement または string (CSSセレクター付き)。 PTR要素 (ptr-content)。必須。

app.ptr.refresh(el)- 指定されたPTRコンテンツ要素でPTRをトリガーします

el - HTMLElement または string (CSSセレクター付き)。 PTR要素 (ptr-content)。必須。

プルダウン更新のメソッドとプロパティ

PTRを手動で作成した場合、または app.ptr.get メソッドを使用した場合は、便利なメソッドとプロパティを持つPTR初期化インスタンスを取得します

// init ptr manually
var ptr = app.ptr.create('.ptr-content');

// or using get to retrieve already created instance
var ptr = app.ptr.get('.ptr-content');

プロパティ
ptr.app	グローバルアプリインスタンスへのリンク
ptr.el	PTR HTML要素 (`ptr-content`)
ptr.$el	PTR HTML要素 (`ptr-content`) を持つDom7インスタンス
メソッド
ptr.done()	PTR状態をリセットする
ptr.refresh()	PTRをトリガーする
ptr.destroy()	PTRインスタンスを破棄し、指定されたHTML要素からPTRイベントリスナーを削除します

プルダウン更新イベント

PTRは、ポップアップ要素で以下のDOMイベントを発生させ、アプリとポップアップインスタンスでイベントを発生させます

DOMイベント

イベント	ターゲット	説明
ptr:pullstart	プルダウン更新コンテンツ<div class="ptr-content">	プルダウン更新コンテンツの移動を開始すると、イベントがトリガーされます
ptr:pullmove	プルダウン更新コンテンツ<div class="ptr-content">	プルダウン更新コンテンツの移動中にイベントがトリガーされます
ptr:pullend	プルダウン更新コンテンツ<div class="ptr-content">	プルダウン更新コンテンツをリリースすると、イベントがトリガーされます
ptr:refresh	プルダウン更新コンテンツ<div class="ptr-content">	プルダウン更新が「更新中」状態になると、イベントがトリガーされます。 `event.detail` には、読み込み完了後に状態をリセットするための `ptr.done` メソッドが含まれています
ptr:done	プルダウン更新コンテンツ<div class="ptr-content">	プルダウン更新が完了し、初期状態に戻ると（ `ptr.done` メソッドを呼び出した後）、イベントがトリガーされます
ptr:beforedestroy	プルダウン更新コンテンツ<div class="ptr-content">	PTRインスタンスが破棄される直前にイベントがトリガーされます

アプリとプルダウン更新インスタンスイベント

PTRインスタンスは、セルフインスタンスとアプリインスタンスの両方でイベントを発行します。アプリインスタンスイベントの名前は、 ptr というプレフィックスが付いた同じ名前です。

イベント	ターゲット	引数	説明
pullStart	ptr	(el)	プルダウン更新コンテンツの移動を開始すると、イベントがトリガーされます。引数として、イベントハンドラーはptr要素を受け取ります
ptrPullStart	app	(el)
pullMove	ptr	(el, data)	プルダウン更新コンテンツの移動中にイベントがトリガーされます。引数として、イベントハンドラーはptr要素と、以下のプロパティを含むptrデータを受け取ります `event` - touchmoveイベント `scrollTop` - 現在のスクロールトップ位置 `translate` - 現在のtranslateYオフセット `touchesDiff` - タッチの差（ピクセル単位）
ptrPullMove	app	(el, data)
pullEnd	ptr	(el, data)	プルダウン更新コンテンツをリリースすると、イベントがトリガーされます。引数として、イベントハンドラーはptr要素を受け取ります
ptrPullEnd	app	(el, data)
refresh	ptr	(el, done)	プルダウン更新が「更新中」状態になると、イベントがトリガーされます。引数として、イベントハンドラーはptr要素と、PTR状態をリセットするための `done` 関数を受け取ります
ptrRefresh	app	(el, done)
done	ptr	(el)	プルダウン更新が完了し、初期状態に戻ると（ `ptr.done` メソッドを呼び出した後）、イベントがトリガーされます。引数として、イベントハンドラーはptr要素を受け取ります
ptrDone	app	(el)
beforeDestroy	ptr	(ptr)	PTRインスタンスが破棄される直前にイベントがトリガーされます。引数として、イベントハンドラーはPTRインスタンスを受け取ります
ptrBeforeDestroy	app	(ptr)

CSS変数

以下は、関連するCSS変数（CSSカスタムプロパティ）のリストです。

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

例

上からプル

pull-to-refresh.f7.html

<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 }) => {
    // Dummy Content
    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.framework7.io/placeholder/abstract-88x88-1.jpg',
        song: 'Yellow Submarine',
        author: 'Beatles',
      },
      {
        picURL: 'https://cdn.framework7.io/placeholder/abstract-88x88-2.jpg',
        song: 'Don\'t Stop Me Now',
        author: 'Queen',
      },
      {
        picURL: 'https://cdn.framework7.io/placeholder/abstract-88x88-3.jpg',
        song: 'Billie Jean',
        author: 'Michael Jackson',
      },
    ]

    const loadMore = (e, done) => {
      // Emulate 2s loading
      setTimeout(() => {
        const picURL = 'https://cdn.framework7.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)];
        // Add new item
        items.push({
          picURL,
          song,
          author,
        });

        // Update state to rerender
        $update();

        // When loading done, we need to reset it
        done();
      }, 2000);
    }

    return $render;
  }
</script>

下からプル

pull-to-refresh-bottom.f7.html

<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 }) => {
    // Dummy Content
    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.framework7.io/placeholder/abstract-88x88-1.jpg',
        song: 'Yellow Submarine',
        author: 'Beatles',
      },
      {
        picURL: 'https://cdn.framework7.io/placeholder/abstract-88x88-2.jpg',
        song: 'Don\'t Stop Me Now',
        author: 'Queen',
      },
      {
        picURL: 'https://cdn.framework7.io/placeholder/abstract-88x88-3.jpg',
        song: 'Billie Jean',
        author: 'Michael Jackson',
      },
    ]

    const loadMore = (e, done) => {
      // Emulate 2s loading
      setTimeout(() => {
        const picURL = 'https://cdn.framework7.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)];
        // Add new item
        items.push({
          picURL,
          song,
          author,
        });

        // Update state to rerender
        $update();

        // When loading done, we need to reset it
        done();
      }, 2000);
    }

    return $render;
  }
</script>

このドキュメントを改善する

このページの内容

プルダウン更新レイアウト
下からのプルダウン更新
プルダウン更新シーケンス
プルダウン更新アプリメソッド
プルダウン更新のメソッドとプロパティ
プルダウン更新イベント

DOMイベント
アプリとプルダウン更新インスタンスイベント

CSS変数
例