react 中实现全屏滚动效果

• 首先先安装插件

npm install @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>
    );
  }

1.  通过continuouseVertical 来进行控制循环的方向
2. loopHorizontal和continuouseVertical循环恰恰相反

 return (
    <div>
      <ReactFullpage
        scrollingSpeed={700} //切换的秒数
        continuousVertical={true} //是否循环 纵向循环
        anchors={anchors} // 每一部分的锚点, 就是url#后面的部分
        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={"page 1"} />
              <MySection content={"page 2"} />
              <MySection content={"page 3"} />
            </div>
          );
        }}
      />
    </div>
  )