React项目中使用fullpage.js实现整屏翻页

最近笔者在完成一个移动端小项目的过程中需要实现整屏翻页的效果;调研完毕之后,最终决定使用pullPage.js实现此功能。理由也很简单,fullPage.js使用起来比较方便,并且官网上也给了在react项目中使用的demo。本文记录了这个第三方库的使用过程。

1. 安装

bash 复制代码
yarn add fullpage.js

2. 项目中引入

js 复制代码
import fullpage from 'fullpage.js';
import 'fullpage.js/dist/fullpage.css';

3. 挂载

在dom加载完成之后,实例化fullpage

js 复制代码
  useEffect(() => {
    new fullpage('#fullpage', {
      credits: { enabled: false, label: '', position: 'right' },
      // fullpage.js的配置选项
      // 例如:sectionsColor, navigation等
    });
  }, []);

new fullpage的时候会自动去寻找id为fullpage的dom元素 ,因此一定保证根元素的id为fullpage,如下所示:

jsx 复制代码
    <div id="fullpage">
      <div className='section' style={{ boxSizing: 'border-box', height: window.innerHeight }}>
      ...
      </div>
    </div>

fullpage作用的对象是 ,而页使用section这个类名来表示,如上面的代码所示。

4. 修改

fullpage.js夹杂了一些私货,需要手动去除

css 复制代码
.fp-overflow {
  height: 100%;
}

.fp-watermark {
  display: none;
}

第一个消除的是垂直方向的居中,一般来说不需要;

第二个则是这个组件的商标,也需要去掉。

相关推荐
new出一个对象1 小时前
uniapp接入BMapGL百度地图
javascript·百度·uni-app
你挚爱的强哥2 小时前
✅✅✅【Vue.js】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本
javascript·vue.js·jquery
y先森2 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy2 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189112 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿4 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡5 小时前
commitlint校验git提交信息
前端
虾球xz5 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇5 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒5 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript