React使用fullpage.js实现整屏翻页功能
更新时间：2023年11月27日 08:33:32 作者：慕仲卿
最近笔者在完成一个移动端小项目的过程中需要实现整屏翻页的效果；调研完毕之后,最终决定使用pullPage.js实现此功能,fullPage.js使用起来比较方便,并且官网上也给了在react项目中使用的demo,本文记录了这个第三方库的使用过程,感兴趣的朋友可以参考下
1. 安装
yarn add fullpage.js
2. 项目中引入
import fullpage from 'fullpage.js'; import 'fullpage.js/dist/fullpage.css';
3. 挂载
在dom加载完成之后，实例化fullpage
useEffect(() => {
new fullpage('#fullpage', {
credits: { enabled: false, label: '', position: 'right' },
// fullpage.js的配置选项
// 例如：sectionsColor, navigation等
});
}, []);
new fullpage的时候会自动去寻找id为fullpage的dom元素，因此一定保证根元素的id为fullpage，如下所示：
<div id="fullpage">
<div className='section' style={{ boxSizing: 'border-box', height: window.innerHeight }}>
...
</div>
</div>
fullpage作用的对象是页，而页使用section这个类名来表示，如上面的代码所示。
4. 修改
fullpage.js夹杂了一些私货，需要手动去除
.fp-overflow {
height: 100%;
}
.fp-watermark {
display: none;
}
第一个消除的是垂直方向的居中，一般来说不需要；
第二个则是这个组件的商标，也需要去掉。
到此这篇关于React使用fullpage.js实现整屏翻页功能的文章就介绍到这了,更多相关React fullpage.js整屏翻页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
Hook 是 React 16.8 的新增特性，它可以让我们在不编写class的情况下, 使用state以及其他的React特性(比如生命周期，这篇文章主要介绍了React类组件和函数组件对比-Hooks的介绍及初体验,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了React如何解决样式污染问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
react Input组件Compositionstart和Compositionend事件
这篇文章主要为大家介绍了Compositionstart和Compositionend事件之于react组件库Input组件的坑解决，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
关于antd tree和父子组件之间的传值问题(react 总结)
这篇文章主要介绍了关于antd tree 和父子组件之间的传值问题，是小编给大家总结的一些react知识点，本文通过一个项目需求实例代码详解给大家介绍的非常详细，需要的朋友可以参考下2021-06-06
本文主要介绍了React19通用ECharts组件的使用示例,支持饼图、折线图和柱状图,并且可以自动销毁实例以避免重复渲染问题,同时能够自动响应窗口大小变化,下面就来详细的介绍一下2026-02-02
这篇文章主要介绍了为什么说form元素是React的未来，本文会带你聊聊React围绕form的布局与发展，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
这篇文章主要介绍了react native 获取地理位置的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-08-08
React中setTimeout获取不到最新State值的原因及解决方案
在 React 开发中,我们常常需要在异步操作中访问组件的 State,然而,由于 React 的闭包机制和异步更新特性,setTimeout 中可能会获取到过时的 State 值,本文将深入解析这一现象的原因,并提供多种解决方案,需要的朋友可以参考下2025-10-10
React Refs 的使用forwardRef 源码示例解析
这篇文章主要为大家介绍了React 之 Refs 的使用和 forwardRef 的源码解读，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
文章介绍了通过React Router的Route组件的exact属性实现精确匹配路由路径,并在路由切换时执行菜单高亮逻辑,通过componentDidUpdate生命周期方法判断路由地址是否切换来实现菜单项的高亮效果,需要的朋友可以参考下2026-05-05
最新评论