React使用fullpage.js實現(xiàn)整屏翻頁功能
更新時間：2023年11月27日 08:33:32 作者：慕仲卿
最近筆者在完成一個移動端小項目的過程中需要實現(xiàn)整屏翻頁的效果；調(diào)研完畢之后,最終決定使用pullPage.js實現(xiàn)此功能,fullPage.js使用起來比較方便,并且官網(wǎng)上也給了在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;
}
第一個消除的是垂直方向的居中，一般來說不需要；
第二個則是這個組件的商標，也需要去掉。
到此這篇關(guān)于React使用fullpage.js實現(xiàn)整屏翻頁功能的文章就介紹到這了,更多相關(guān)React fullpage.js整屏翻頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Hook?是?React?16.8?的新增特性，它可以讓我們在不編寫class的情況下,?使用state以及其他的React特性(比如生命周期，這篇文章主要介紹了React類組件和函數(shù)組件對比-Hooks的介紹及初體驗,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了React如何解決樣式污染問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
react Input組件Compositionstart和Compositionend事件
這篇文章主要為大家介紹了Compositionstart和Compositionend事件之于react組件庫Input組件的坑解決，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
關(guān)于antd tree和父子組件之間的傳值問題(react 總結(jié))
這篇文章主要介紹了關(guān)于antd tree 和父子組件之間的傳值問題，是小編給大家總結(jié)的一些react知識點，本文通過一個項目需求實例代碼詳解給大家介紹的非常詳細，需要的朋友可以參考下2021-06-06
本文主要介紹了React19通用ECharts組件的使用示例,支持餅圖、折線圖和柱狀圖,并且可以自動銷毀實例以避免重復(fù)渲染問題,同時能夠自動響應(yīng)窗口大小變化,下面就來詳細的介紹一下2026-02-02
這篇文章主要介紹了為什么說form元素是React的未來，本文會帶你聊聊React圍繞form的布局與發(fā)展，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要介紹了react native 獲取地理位置的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
React中setTimeout獲取不到最新State值的原因及解決方案
在 React 開發(fā)中,我們常常需要在異步操作中訪問組件的 State,然而,由于 React 的閉包機制和異步更新特性,setTimeout?中可能會獲取到過時的 State 值,本文將深入解析這一現(xiàn)象的原因,并提供多種解決方案,需要的朋友可以參考下2025-10-10
React?Refs?的使用forwardRef?源碼示例解析
這篇文章主要為大家介紹了React?之?Refs?的使用和?forwardRef?的源碼解讀，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
文章介紹了通過React Router的Route組件的exact屬性實現(xiàn)精確匹配路由路徑,并在路由切換時執(zhí)行菜單高亮邏輯,通過componentDidUpdate生命周期方法判斷路由地址是否切換來實現(xiàn)菜單項的高亮效果,需要的朋友可以參考下2026-05-05