简介
fullpage.js 是一款流行的全屏滚动库，而 @sdgluck/fullpage-react 是一款基于 fullpage.js 的 React 组件。 它不仅提供了全屏滚动功能，还可以根据用户自定义的配置灵活的处理滚动，实现更加个性化的网页。
在本篇文章中，我们将详细讲解如何使用 @sdgluck/fullpage-react，以及如何利用它来构建美观、可访问、并提高用户交互性的网站。
安装
安装 @sdgluck/fullpage-react 不需要太多麻烦的操作。只需要在终端中输入以下命令即可完成安装：
npm install --save @sdgluck/fullpage-react
使用
Import
以 ES6 为例，你可以通过以下代码导入 fullpage-react：
import React from 'react'; import Fullpage from '@sdgluck/fullpage-react';
Configuration
Fullpage 通过 props 来接收用户配置参数。例如，要实现 3 个页面的全屏滚动：
-- -------------------- ---- -------
---------
-----------------
----------
-------------- ----------- ---------- -----------
-------- -------------- ------------- ---------------
--
-
-----
----------- ------
------
-----
----------- ------
------
-----
----------- ------
------
-----------props 参数示例:
displaySections(boolean): 是否显示分页器. 默认值:false.enableArrowKeys(boolean): 是否启用箭头键切换页面. 默认值:true.resetSlides(boolean): 在大屏幕上更改窗口大小时重新调整 Fullpage. 默认值:false.debug(boolean): 在控制台中记录所有 Fullpage 事件. 默认值:false.options(object): 一个实例全页插件的选项（更多详细请参考 fullpage.js 的官方文档）。
关于 options 参数：
menu(string|boolean|object): 如果用户为要使用菜单，则可以使用此配置，并将其值设置为true或使用更多详细信息的可配置选项menu. 默认值:false.sectionsColor(array): 各部分的背景颜色. 默认值:[].anchors(array): 锚链接. 默认值:[].scrollBar(boolean): 创建一个自定义滚动条. 默认值：false.scrollOverflow(boolean|object): 设置为true以开启滚动溢出并查看更多详细信息的可配置选项。默认值:false.controlArrows(boolean): 通过较长的数量添加切换箭头。默认值:true.verticalCentered(boolean): 启用 将各个幻灯片居中指定值，如果需要通过Y轴创建一个完整的鸟瞰图，默认为true.sectionsColor(array|string|function): 给每个部分指定颜色的数组或一个使用部分号 (或锚) 作为输入的返回值颜色函数。默认：[].fixedElements(string): 其中一个选择器的定义只要被输入，这个元素就会被固定在界面上，而 fullpage 组件的元素开始滚动。默认值:null.responsive(number): 改变窗口大小时自动更改滚动行为，或使用视口宽度自动调整分节的大小。 默认值：false.scrollHorizontally（boolean）：启动水平滚动。默认值：false.
FullPage 组件
我们在上面的配置中已经给出了一个大致的全屏滚动示例。在这个例子中，我们首先创建了一个基本布局。既然 Fullpage 获取组件的所有子元素，我们使用多个 div 元素进行布局。 Fullpage 将以全屏幕形式呈现所有子级，并使用用户定义的 options 进行滚动。
大多数情况下，这样做就足够了，但随着项目的复杂度的提高，可能需要使用自定义组件。@sdgluck/fullpage-react 使其非常简单，只需将 React 组件传递给 Fullpage 组件即可。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- --------------------------
----- --------- - -- -- -
----- ------------ - -
---------------- ---------
------- --------
-------- -------
--------------- ---------
----------- --------
-
------ -
-------- ---------------------
---------- ------------
----------
--
--
----- --- - -- -- -
------ -
---------
------------------
----------
-------------- ----------- ---------- -----------
-------- -------------- ------------- ---------------
--
-
---------- --
-----
----------- ------
------
-----
----------- ------
------
-----------
--
--
------ ------- ----这个例子中，我们提供了一个自定义的组件 MySection 作为第一部分。Fullpage 会渲染这个组件，并将它放在与其他元素相同的滚动上下文中。这非常有利于对各类元素进行适当的布局。
在这个例子中，我们将 MySection 设置为 display 为 flex，并使用 justify-content 和 align-items 属性居中文本。这可以确保文本始终居中。这也使得 MySection 在不同设备上具有响应式特性。
传递数据
在某些情况下，您可能需要向 Fullpage 组件中的某个特定部分传递数据。这是非常简单的。我们可以定义一个有状态组件，并在需要传递数据的部分中渲染该组件。在该子组件上，我们可以通过 props 传递数据。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- --------------------------
----- ----- ------- --------- -
------------------ -
-------------
---------- - -
------ -------- -- -- ---------
-
-
-------- -
------ -
---------------------------
--
-
-
----- --- - -- -- -
------ -
---------
-----------------
----------
-------------- ----------- ---------- -----------
-------- -------------- ------------- ---------------
--
-
-----
------ --
------
-----
----------- ------
------
-----
----------- ------
------
-----------
--
--
------ ------- ----在这个例子中，我们创建了一个名为 Title 的组件，它有一个名称为 title 的状态。这个状态我们将它初始化为 Welcome to My Website! 字符串。
接下来，我们在Fullpage组件中的第一部分中呈现Title组件。任何在此组件中定义的状态和属性都可以通过 props 传递。
<div> <Title /> </div>
这个例子只是一个简单的演示，但它展示了如何使用组件的状态和 props 传递数据。
示例
我们在上面展示了一些完整的 Fullpage 组件的示例。熟悉了基础使用方法后，这些示例将帮助您更深入的了解 Fullpage。此示例程序可以在代码库中找到：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ -------- ---- --------------------------
----- ----- - -- -- -
----- ----- - -
---------------- --------
------ --------
------- --------
-------- -------
--------------- ---------
----------- --------
--
------ -
-------- --------------
------ ----------
----------
--
--
----- ----- - -- -- -
----- ----- - -
---------------- --------
------- --------
-------- -------
--------------- ---------
----------- --------
--
------ -
-------- --------------
--------- -------
----------
--
--
----- ----------- ------- --------- -
------------------ -
-------------
---------- - -
----- ---
------ ---
-------- --
--
-
---------------- - - -- -
--------------- ----- -------------- ---
--
----------------- - - -- -
--------------- ------ -------------- ---
--
------------------- - - -- -
--------------- -------- -------------- ---
--
------------ - - -- -
-------------------
------------------------
--
-------- -
----- ----- - -
---------------- --------
------ --------
------- --------
-------- -------
--------------- ---------
----------- --------
--
------ -
-------- --------------
----- -----------------------------
------
-----------
------------------
-----------------------
--------------------------------
--
--- --
------
------------
-------------------
------------------------
---------------------------------
--
--- --
---------
---------------------
--------------------------
-----------------------------------
------------
--- --
------- -----------------------------
-------
----------
--
-
-
----- --- - -- -- -
------ -
---------
-----------------
----------
-------------- --------- -------- ---------
-------- --------- -------- ----------
--
-
------ --
------ --
------------ --
-----------
--
--
------ ------- ----在这个例子中，我们定义了三个组件与 Title，About 和 ContactForm 鼓舞人心的名字。这三个组件分别代表 Fullpage 中的三个部分。你可以定义与这个演示相同的组件，或者使用自己的创意来定义它们。
总结
通过本篇文章，我们了解了如何使用 npm 包 @sdgluck/fullpage-react 来创建各种全屏滚动效果。这款基于 React 的全屏滑页库不仅方便易用，而且非常灵活。通过 Fullpage，您可以轻松地创建整洁而有效的滚动网站。
通过配置 props，您可以自由定制您的网站并更好地满足您的需求。 Fullpage 使您能够通过将组件传递给它来轻松地实现自定义布局和页面。您也可以借助 state 和 props 轻松地传递数据。
我们希望这篇介绍能够使您了解 Fullpage 的基础知识，并激发您对使用其功能构建自定义滚动网站的创意。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600559e181e8991b448d76b7