ページReactコンポーネント

例

Infinite Scroll

import React, { useState, useRef } from 'react';
import { Page, Navbar, 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" />
      <BlockTitle>Scroll bottom</BlockTitle>
      <List>
        {items.map((item, index) => (
          <ListItem title={`Item ${item}`} key={index}></ListItem>
        ))}
      </List>
    </Page>
      
    
  );
};

Pull To Refresh

import React, { useState } from 'react';
import { Page, Navbar, 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>
        {items.map((item, index) => (
          <ListItem key={index} title={item.title} subtitle={item.author}>
            <img slot="media" src={item.cover} width="44" />
          </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>
      
    
  );
};