React使用fullpage.js實現(xiàn)整屏翻頁功能
更新時間：2023年11月27日 08:33:32 作者：慕仲卿
最近筆者在完成一個移動端小項目的過程中需要實現(xiàn)整屏翻頁的效果；調研完畢之后,最終決定使用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;
}
第一個消除的是垂直方向的居中，一般來說不需要；
第二個則是這個組件的商標，也需要去掉。
到此這篇關于React使用fullpage.js實現(xiàn)整屏翻頁功能的文章就介紹到這了,更多相關React fullpage.js整屏翻頁內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要為大家詳細介紹了React處理復雜圖片樣式的方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-04-04
這篇文章主要介紹了詳解React中Fragment的簡單使用，文中通過示例代碼介紹的非常詳細，對我們學習React有一定的幫助，感興趣的小伙伴們可以參考一下2022-10-10
redux-toolkit是目前redux官方推薦的編寫redux邏輯的方法，針對redux的創(chuàng)建store繁瑣、樣板代碼太多、依賴外部庫等問題進行了優(yōu)化，官方總結了四個特點是簡易的/有想法的/強勁的/高效的，總結來看，就是更加的方便簡單了2022-12-12
這篇文章主要介紹了react-router-domV6版本改版踩坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本篇文章主要介紹了詳解使用React進行組件庫開發(fā)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-02-02
React videojs 實現(xiàn)自定義組件(視頻畫質/清晰度切換) 的操作代碼
最近使用videojs作為視頻處理第三方庫,用來對接m3u8視頻類型,這里總結一下自定義組件遇到的問題及實現(xiàn),感興趣的朋友跟隨小編一起看看吧2023-08-08
react 不用插件實現(xiàn)數(shù)字滾動的效果示例
這篇文章主要介紹了react 不用插件實現(xiàn)數(shù)字滾動的效果示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
React父組件數(shù)據(jù)實時更新了,子組件沒有更新的問題
這篇文章主要介紹了React父組件數(shù)據(jù)實時更新了,子組件沒有更新的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
react使用antd-design中select不能及時刷新問題及解決
這篇文章主要介紹了react使用antd-design中select不能及時刷新問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React中的CSS局部引入過程，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03