React使用fullpage.js实现整屏翻页功能
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整屏翻页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
使用webpack配置react-hot-loader热加载局部更新
这篇文章主要介绍了使用webpack配置react-hot-loader热加载局部更新,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教2023-01-01在react-antd中弹出层form内容传递给父组件的操作
这篇文章主要介绍了在react-antd中弹出层form内容传递给父组件的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
最新评论