fullPage.js（一屏滚动）

官网：https://alvarotrigo.com/fullPage/zh
github：https://github.com/alvarotrigo/fullPage.js
react 官方封装：@fullpage/react-fullpage

有的网页每次滚动就是一屏，fullPage.js 就是制作这种效果的一个 JS 库。
通过调用本库可轻易创建全屏滚动网站(也称为单页网站)。 本库可创建全屏滚动网站，同时也可在网站中添加横向滚动条。（商用是付费的，淘宝上有破解版）

特点

• fullPage.js易于使用，可自定义
• 包含数十个例子，出色的文档，可社区和个人
• 专为手机和平板电脑设计，完全响应

简介：https://madewith.cn/84
示例：https://alvarotrigo.com/react-fullpage/?from=madewith.cn

效果

安装

npm install @fullpage/react-fullpage

index.jsx

import React from 'react';
import ReactFullpage from '@fullpage/react-fullpage';
import styles from './index.less';
const MySection = (props) => {
  return (
    <div className="section">
      <h3>{props.children}</h3>
    </div>
  );
};
const anchors = ["firstPage", "secondPage", "thirdPage"];
const FullPage = () => {
  return (
    <div className={styles['full-page']}>
      <ReactFullpage
        anchors={anchors}
        navigation
        navigationTooltips={anchors}
        sectionsColor={["#282c34", "#ff5f45", "#0798ec"]}
        onLeave={(origin, destination, direction) => {
          console.log("onLeave event", { origin, destination, direction });
        }}
        render={({ state, fullpageApi }) => {
          return (
            <div>
              {
                ['向下滑动！', '继续下滑！', '向上滑动！'].map((item, index) => (
                  <MySection key={index}>{item}</MySection>
                ))
              }
            </div>
          );
        }}
      />
    </div>
  );
};
export default FullPage;

index.less

.full-page {
  :global {
    h3 {
      font-size: 30px;
      text-align: center;
      color: #fff;
      font-weight: 700;
    }
    #section1 {
      color: #fff;
    }
    .fp-section {
      text-align: center;
    }
  }
}