スポンサースポンサーになる

Page Svelteコンポーネント

Framework7におけるPageは、ウェブページを想像する際と同じ意味を持ちます。Pageはコンテンツを表示し操作するための主要なコンポーネントです。

Page Svelteコンポーネントは、Framework7のPageを表します。

Pageコンポーネント

以下のコンポーネントが含まれています

Pageプロパティ

プロパティ型デフォルト値説明
<Page>プロパティ
name文字列ページ名
messagesContentブール値Messagesコンポーネントを内部で使用し、必要な追加スタイルを追加する場合に有効にします。
pageContentブール値true有効にすると、page-content要素が自動的に内部に追加されます。タブに対していくつかのpage-content要素を使用する必要がある場合に無効にするのに役立ちます。
tabsブール値Pageをタブラッパーとして使用する場合に有効にします。
loginScreenブール値ログイン画面をページ内に使用し、必要な追加スタイルを追加する場合に有効にします。
noSwipebackブール値現在のページのスワイプバック機能を無効にします（iOSテーマのみに影響します）。
withSubnavbarブール値ページ内にサブナビゲーションバーがある場合に有効にします。
noNavbarブール値共通のナビゲーションバーレイアウトを使用し、このページの共通のナビゲーションバーを非表示にする（または別のナビゲーションバーを使用する）必要がある場合に有効にします（iOSテーマのみに影響します）。
noToolbarブール値共通のツールバー/タブバーレイアウトを使用し、このページのツールバーを非表示にする（または別のツールバーを使用する）必要がある場合に有効にします。
hideBarsOnScrollブール値ページスクロール時にナビゲーションバーとツールバーを非表示にします。
hideNavbarOnScrollブール値ページスクロール時にナビゲーションバーを非表示にします。
hideToolbarOnScrollブール値ページスクロール時にツールバーを非表示にします。
ptrブール値プルツーリフレッシュを有効にします。
ptrDistance数値プルツーリフレッシュのトリガー距離をカスタマイズします。デフォルト（指定しない場合）は44pxです。
ptrPreloaderブール値trueカスタムのプルツーリフレッシュプリローダー要素を使用する場合は無効にします。
ptrBottomブール値false下部からのプルツーリフレッシュを有効にします。
ptrMousewheelブール値falseマウスホイールによるプルツーリフレッシュを有効にします（デスクトップアプリ用）。PTRの上部のみ有効です。
infiniteブール値無限スクロールを有効にします。
infiniteTopブール値ページ上部で無限スクロールを有効にします。
infiniteDistance数値無限スクロールイベントをトリガーするページ下部からの距離（px単位）。デフォルト（指定しない場合）は50（px）です。
infinitePreloaderブール値trueカスタムの無限スクロールプリローダーを使用する場合は無効にします。
<PageContent>プロパティ
tabブール値page-contentをタブとして使用する場合に有効にします。
tabActiveブール値現在のタブがアクティブな場合に有効にします。
ptr
ptrDistance
ptrPreloader
ptrBottom
ptrMousewheel
infinite
infiniteTop
infiniteDistance
infinitePreloader
hideBarsOnScroll
hideNavbarOnScroll
hideToolbarOnScroll
messagesContent
loginScreen		<Page>プロパティと同じです。

Pageイベント

イベント説明
<Page>イベント
pageMountedkeepAliveルートを持つページがDOMにマウント/アタッチされたときにトリガーされるイベントです。
pageInitFramework7がページに必要なコンポーネントとナビゲーションバーを初期化した後にトリガーされるイベントです。
pageReinit既に初期化されているページに移動した場合にトリガーされるイベントです。
pageBeforeInすべてが初期化され、ページが表示される準備ができたときに（アクティブ/現在の位置に）トリガーされるイベントです。
pageAfterInページが表示された後にトリガーされるイベントです。
pageBeforeOutページが表示領域から外れる直前にトリガーされるイベントです。
pageAfterOutページが表示領域から外れた後にトリガーされるイベントです。
pageBeforeUnmountkeepAliveルートを持つページがDOMからアンマウント/デタッチされる直前にトリガーされるイベントです。
pageBeforeRemovePageがDOMから削除される直前にトリガーされるイベントです。イベントをデタッチしたり、プラグインを破棄してメモリを解放する必要がある場合に非常に役立ちます。このイベントはkeepAliveルートではトリガーされません。
pageTabShowページの親View as Tabが表示されたときにトリガーされるイベントです。
pageTabHideページの親View as Tabが非表示になったときにトリガーされるイベントです。
ptrPullStartプルツーリフレッシュコンテンツの移動を開始したときにトリガーされるイベントです。
ptrPullMoveプルツーリフレッシュコンテンツを移動中にトリガーされるイベントです。
ptrPullEndプルツーリフレッシュコンテンツを離したときにトリガーされるイベントです。
ptrRefreshプルツーリフレッシュが「更新中」状態になったときにトリガーされるイベントです。
ptrDoneプルツーリフレッシュが完了し、初期状態に戻った後にトリガーされるイベントです（pullToRefreshDoneメソッドを呼び出した後）。
infiniteページスクロールが（data-distance属性で指定された）下部からの特定の距離に達したときにトリガーされるイベントです。
<PageContent>イベント
tabShowタブが表示/アクティブになったときにトリガーされるイベントです。
tabHideタブが非表示/非アクティブになったときにトリガーされるイベントです。
ptrPullStart
ptrPullMove
ptrPullEnd
ptrRefresh
ptrDone
infinite		<Page>イベントと同じです。

Pageスロット

Page Svelteコンポーネント（<Page>）には、カスタム要素用の追加スロットがあります。

<Page>
  <div slot="fixed">Fixed element</div>
  <p>Page content goes here</p>
</Page>

<!-- Renders to: -->

<div class="page">
  <div>Fixed element</div>
  <div class="page-content">
    <p>Page content goes here</p>
  </div>
</div>

例

無限スクロール

infinite-scroll.svelte
<script>
  import { Navbar, Page, BlockTitle, List, ListItem } from 'framework7-svelte';

  let items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  let allowInfinite = true;
  let showPreloader = true;

  function loadMore() {
    if (!allowInfinite) return;
    allowInfinite = false;

    setTimeout(() => {
      if (items.length >= 200) {
        showPreloader = false;
        return;
      }

      const itemsLength = items.length;

      for (let i = 1; i <= 20; i += 1) {
        items.push(itemsLength + i);
      }

      items = items;
      allowInfinite = true;
    }, 1000);
  }
</script>

<Page infinite infiniteDistance={50} infinitePreloader={showPreloader} onInfinite={loadMore}>
  <Navbar title="Infinite Scroll" />
  <BlockTitle>Scroll bottom</BlockTitle>
  <List strongIos outlineIos dividersIos>
    {#each items as item, index (index)}
      <ListItem title={`Item ${item}`} />
    {/each}
  </List>
</Page>

プルツーリフレッシュ

pull-to-refresh.svelte
<script>
  import { Navbar, Page, List, ListItem, BlockFooter } from 'framework7-svelte';

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

  function loadMore(done) {
    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)];
      items.push({
        title: song,
        author,
        cover: picURL,
      });
      items = items;

      done();
    }, 1000);
  }
</script>

<!-- svelte-ignore a11y-missing-attribute -->
<Page ptr ptrMousewheel={true} onPtrRefresh={loadMore}>
  <Navbar title="Pull To Refresh" />
  <List mediaList strongIos dividersIos outlineIos>
    {#each items as item, index (index)}
      <ListItem title={item.title} subtitle={item.author}>
        <img slot="media" src={item.cover} width="44" style="border-radius: 8px" />
      </ListItem>
    {/each}
  </List>
  <BlockFooter>
    <p>
      Just pull page down to let the magic happen.<br />Note that pull-to-refresh feature is
      optimised for touch and native scrolling so it may not work on desktop browser.
    </p>
  </BlockFooter>
</Page>
このドキュメントを改善する
このページについて