React使用fullpage.js實(shí)現(xiàn)整屏翻頁(yè)功能
更新時(shí)間：2023年11月27日 08:33:32 作者：慕仲卿
最近筆者在完成一個(gè)移動(dòng)端小項(xiàng)目的過(guò)程中需要實(shí)現(xiàn)整屏翻頁(yè)的效果；調(diào)研完畢之后,最終決定使用pullPage.js實(shí)現(xiàn)此功能,fullPage.js使用起來(lái)比較方便,并且官網(wǎng)上也給了在react項(xiàng)目中使用的demo,本文記錄了這個(gè)第三方庫(kù)的使用過(guò)程,感興趣的朋友可以參考下
1. 安裝
yarn add fullpage.js
2. 項(xiàng)目中引入
import fullpage from 'fullpage.js'; import 'fullpage.js/dist/fullpage.css';
3. 掛載
在dom加載完成之后，實(shí)例化fullpage
useEffect(() => {
new fullpage('#fullpage', {
credits: { enabled: false, label: '', position: 'right' },
// fullpage.js的配置選項(xiàng)
// 例如：sectionsColor, navigation等
});
}, []);
new fullpage的時(shí)候會(huì)自動(dòng)去尋找id為fullpage的dom元素，因此一定保證根元素的id為fullpage，如下所示：
<div id="fullpage">
<div className='section' style={{ boxSizing: 'border-box', height: window.innerHeight }}>
...
</div>
</div>
fullpage作用的對(duì)象是頁(yè)，而頁(yè)使用section這個(gè)類名來(lái)表示，如上面的代碼所示。
4. 修改
fullpage.js夾雜了一些私貨，需要手動(dòng)去除
.fp-overflow {
height: 100%;
}
.fp-watermark {
display: none;
}
第一個(gè)消除的是垂直方向的居中，一般來(lái)說(shuō)不需要；
第二個(gè)則是這個(gè)組件的商標(biāo)，也需要去掉。
到此這篇關(guān)于React使用fullpage.js實(shí)現(xiàn)整屏翻頁(yè)功能的文章就介紹到這了,更多相關(guān)React fullpage.js整屏翻頁(yè)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了React處理復(fù)雜圖片樣式的方法,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
這篇文章主要介紹了詳解React中Fragment的簡(jiǎn)單使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)我們學(xué)習(xí)React有一定的幫助，感興趣的小伙伴們可以參考一下2022-10-10
如何使用Redux Toolkit簡(jiǎn)化Redux
redux-toolkit是目前redux官方推薦的編寫redux邏輯的方法，針對(duì)redux的創(chuàng)建store繁瑣、樣板代碼太多、依賴外部庫(kù)等問(wèn)題進(jìn)行了優(yōu)化，官方總結(jié)了四個(gè)特點(diǎn)是簡(jiǎn)易的/有想法的/強(qiáng)勁的/高效的，總結(jié)來(lái)看，就是更加的方便簡(jiǎn)單了2022-12-12
這篇文章主要介紹了react-router-domV6版本改版踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
詳解使用React進(jìn)行組件庫(kù)開(kāi)發(fā)
本篇文章主要介紹了詳解使用React進(jìn)行組件庫(kù)開(kāi)發(fā)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
React videojs 實(shí)現(xiàn)自定義組件(視頻畫質(zhì)/清晰度切換) 的操作代碼
最近使用videojs作為視頻處理第三方庫(kù),用來(lái)對(duì)接m3u8視頻類型,這里總結(jié)一下自定義組件遇到的問(wèn)題及實(shí)現(xiàn),感興趣的朋友跟隨小編一起看看吧2023-08-08
react 不用插件實(shí)現(xiàn)數(shù)字滾動(dòng)的效果示例
這篇文章主要介紹了react 不用插件實(shí)現(xiàn)數(shù)字滾動(dòng)的效果示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
React父組件數(shù)據(jù)實(shí)時(shí)更新了,子組件沒(méi)有更新的問(wèn)題
這篇文章主要介紹了React父組件數(shù)據(jù)實(shí)時(shí)更新了,子組件沒(méi)有更新的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
react使用antd-design中select不能及時(shí)刷新問(wèn)題及解決
這篇文章主要介紹了react使用antd-design中select不能及時(shí)刷新問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了React中的CSS局部引入過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03