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

ページ React コンポーネント

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

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

ページコンポーネント

次のコンポーネントが含まれています。

ページプロパティ

プロパティ型デフォルト説明
<Page> プロパティ
name文字列ページ名
messagesContentブール値メッセージ コンポーネントを内部で使用して必要な追加のスタイルを追加する場合に有効にします。
pageContentブール値true有効にすると、自動的にpage-content 要素が内部に追加されます。タブにいくつかの page-content 要素を使用する必要がある場合に無効にするのに役立ちます。
tabsブール値ページを タブ ラッパーとして使用する場合に有効にします。
loginScreenブール値ページ内に ログイン画面 を使用して必要な追加のスタイルを追加する場合に有効にします。
noSwipebackブール値現在のページのスワイプバック機能を無効にします（iOS テーマのみに影響します）。
withSubnavbarブール値ページ内にサブナビゲーションバーがある場合に有効にします。
noNavbarブール値共通のナビゲーションバーレイアウトを使用し、このページの共通のナビゲーションバーを非表示にする必要がある場合に有効にします（iOS テーマのみに影響します）。
noToolbarブール値共通のツールバー/タブバーレイアウトを使用し、このページのツールバーを非表示にする必要がある場合に有効にします。
hideBarsOnScrollブール値ページスクロール時にナビゲーションバーとツールバーを非表示にします。
hideNavbarOnScrollブール値ページスクロール時にナビゲーションバーを非表示にします。
hideToolbarOnScrollブール値ページスクロール時にツールバーを非表示にします。
ptrブール値プルToRefresh を有効にします。
ptrDistance数値プルToRefresh トリガーの距離をカスタマイズします。デフォルト（指定されていない場合）は 44px です。
ptrPreloaderブール値trueカスタムのプルToRefresh プリローダー要素を使用する場合は無効にします。
ptrBottomブール値false下部からのプルToRefresh を有効にします。
ptrMousewheelブール値falseマウスホイールによるプルToRefresh を有効にします（デスクトップアプリ用）。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> イベント
pageMountedkeepAlive ルートを持つページが DOM にマウント/アタッチされたときにトリガーされます。
pageInitFramework7 が必要なページのコンポーネントとナビゲーションバーを初期化した後にトリガーされます。
pageReinit既に初期化されているページに移動した場合にトリガーされます。
pageBeforeInすべてが初期化され、ページがビューに遷移する準備ができたときに（アクティブ/現在の位置に）トリガーされます。
pageAfterInページがビューに遷移した後にトリガーされます。
pageBeforeOutページがビューから遷移する直前にトリガーされます。
pageAfterOutページがビューから遷移した後にトリガーされます。
pageBeforeUnmountkeepAlive ルートを持つページが DOM からアンマウント/デタッチされる直前にトリガーされます。
pageBeforeRemoveページが DOM から削除される直前にトリガーされます。イベントをデタッチしたり、プラグインを破棄してメモリを解放する必要がある場合に非常に役立ちます。このイベントは、keepAlive ルートではトリガーされません。
pageTabShowページの親 タブとしてのビュー が表示されたときにトリガーされます。
pageTabHideページの親 タブとしてのビュー が非表示になったときにトリガーされます。
ptrPullStartプルToRefresh コンテンツの移動を開始したときにトリガーされます。
ptrPullMoveプルToRefresh コンテンツを移動中にトリガーされます。
ptrPullEndプルToRefresh コンテンツを離したときにトリガーされます。
ptrRefreshプルToRefresh が「更新中」状態になったときにトリガーされます。
ptrDoneプルToRefresh が完了し、初期状態に戻ったときにトリガーされます（pullToRefreshDone メソッドを呼び出した後）。
infiniteページスクロールが（data-distance 属性で指定された）下部からの距離に達したときにトリガーされます。
<PageContent> イベント
tabShowタブが表示/アクティブになったときにトリガーされます。
tabHideタブが非表示/非アクティブになったときにトリガーされます。
ptrPullStart
ptrPullMove
ptrPullEnd
ptrRefresh
ptrDone
infinite		<Page> イベントと同じです。

ページスロット

Page React コンポーネント（<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.jsx
import React, { useRef, useState } from 'react';
import { Navbar, Page, BlockTitle, List, ListItem } from 'framework7-react';

export default () => {
  const allowInfinite = useRef(true);
  const [items, setItems] = useState([
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
  ]);
  const [showPreloader, setShowPreloader] = useState(true);

  const loadMore = () => {
    if (!allowInfinite.current) return;
    allowInfinite.current = false;

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

      const itemsLength = items.length;

      for (let i = 1; i <= 20; i += 1) {
        items.push(itemsLength + i);
      }
      allowInfinite.current = true;
      setItems([...items]);
    }, 1000);
  };

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

プルToRefresh

pull-to-refresh.jsx
import React, { useState } from 'react';
import { Navbar, Page, List, ListItem, BlockFooter } from 'framework7-react';

export default () => {
  const songs = ['Yellow Submarine', "Don't Stop Me Now", 'Billie Jean', 'Californication'];
  const authors = ['Beatles', 'Queen', 'Michael Jackson', 'Red Hot Chili Peppers'];
  const [items, setItems] = useState([
    {
      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 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,
      });
      setItems([...items]);

      done();
    }, 1000);
  };
  return (
    <Page ptr ptrMousewheel={true} onPtrRefresh={loadMore}>
      <Navbar title="Pull To Refresh"></Navbar>
      <List mediaList strongIos dividersIos outlineIos>
        {items.map((item, index) => (
          <ListItem key={index} title={item.title} subtitle={item.author}>
            <img slot="media" src={item.cover} width="44" style={{ borderRadius: '8px' }} />
          </ListItem>
        ))}
        <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>
      </List>
    </Page>
  );
};
このドキュメントを改善する
このページで