fullPage.js-创建漂亮的全屏滚动网站github链接 fullPage.js, react版 react-fu

github链接 fullPage.js, react版 react-fullpage.

1. 介绍

这个包的功能就是快速实现全屏滚动页面, 支持文件 CDN等引入, 可以再React Vue使用. 支持懒加载等, 接口丰富. 有丰富的案例:

2. 用法

使用npm

npm install @fullpage/react-fullpage

其他用法如Vue等看 fullPage.js

3. demo

创建和安装

// 创建react应用
npx create-react-app fullpage-demo

// 安装
npm install @fullpage/react-fullpage

引入

import ReactFullpage from '@fullpage/react-fullpage';

完整demo

import React from 'react';
import ReactFullpage from '@fullpage/react-fullpage';

const anchors = ["firstPage", "secondPage", "thirdPage"];

const MySection = props => {
  return (
    <div className="section">
      <h3 style={{ textAlign: "center", fontSize: "66px", color: "#fff" }}>{props.content}</h3>
    </div>
  );
}

const App = () => {
  return (
    <ReactFullpage
      anchors={anchors} // 每一部分的锚点, 就是url#后面的部分
      navigation // 是否显示右侧小圆圈
      navigationTooltips={anchors} // 鼠标放到小圆圈上显示的提示
      sectionsColor={["#282c34", "#ff5f45", "#0798ec"]} // 每一个部分你的背景色
      onLeave={(origin, destination, direction) => {
        console.log("onLeave event", { origin, destination, direction });
      }} // 离开某一部分你的回调, 参数分别表示从哪里开 去哪里 方向. 前两者是自定义类型nn, 方向是up或down
      render={({ state, fullpageApi }) => {
        console.log("render prop change", state, fullpageApi);
        return (
          <div>
            <MySection content={"Slide down!"} />
            <MySection content={"Keep going!"} />
            <MySection content={"Slide up!"} />
          </div>
        );
      }}
    />
  );
}

export default App;

更多options查看github.

效果

这里会遇到一个问题: 新版本的fullPage需要强制在props加入licenseKey属性.

不过可以强制删除这行代码. 在如下文件夹搜索licenseKey:

删除选中部分, 改为null

4. 其他

除了以上demo, 还有更加丰富的options methods callbacks等, 详细点击 fullPage