您好,登錄后才能下訂單哦!
這篇文章給大家分享的是有關(guān)react.js中怎么實(shí)現(xiàn)tab吸頂效果的內(nèi)容。小編覺得挺實(shí)用的,因此分享給大家做個(gè)參考,一起跟隨小編過來看看吧。
在react項(xiàng)目開發(fā)中有一個(gè)需求是,頁面滾動(dòng)到tab所在位置時(shí),tab要固定在頂部。
實(shí)現(xiàn)的思路其實(shí)很簡(jiǎn)單,就是判斷當(dāng)滾動(dòng)距離scrollTop大于tab距離頁面頂部距離offsetTop時(shí),將tab的position變?yōu)閒ixed。
在react中,我在state中設(shè)置一個(gè)navTop屬性,切換這個(gè)屬性的值為true或者false,然后tab標(biāo)簽使用classnames()這個(gè)方法來利用navTop的值添加類名fixed。
一開始我是這樣寫的:
import cs from 'classnames'; class FixedTab extends React.Component{ constructor(props){ super(props); this.state = { navTop: false } this.$tab = null; this.offsetTop = 0; } componentDidMount(){ this.$tab = this.refs.tab; if(this.$tab){ this.offsetTop = this.$tab.offsetTop; window.addEventListener('scroll',this.handleScroll); } } handleScroll(){ let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(sTop >= this.offsetTop){ this.setState({ navTop: true }) } if(sTop < this.offsetTop){ this.setState({ navTop:false }) } } render(){ return( <div ref="tab" className={cs({'fixed':this.state.navTop})}></div> ) } }
然后我發(fā)現(xiàn)這樣寫有問題,當(dāng)我滾動(dòng)條滾動(dòng)距離達(dá)到條件時(shí),tab是出現(xiàn)了吸頂?shù)男Ч凰查g又恢復(fù)了,滾動(dòng)條也回彈了,一直無法繼續(xù)下拉。
我一開始以為判斷邏輯有問題,但一直找不到解決的辦法,后來我懷疑是state值改變的時(shí)間差導(dǎo)致的,好像陷入了一個(gè)死循環(huán),然后我就在判斷滾動(dòng)距離之前加了一個(gè)判斷navTop的狀態(tài)。
修改的主要代碼如下:
handleScroll(){ let sTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; if(!this.state.navTop && sTop >= this.offsetTop){ this.setState({ navTop: true }) } if(sTop < this.offsetTop){ this.setState({ navTop:false }) } }
這樣修改之后吸頂效果就正常了。
我認(rèn)為就是setState方法導(dǎo)致的問題,setState本身是一個(gè)異步的方法,它還有一個(gè)參數(shù)是回調(diào)函數(shù)。
感謝各位的閱讀!關(guān)于“react.js中怎么實(shí)現(xiàn)tab吸頂效果”這篇文章就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,讓大家可以學(xué)到更多知識(shí),如果覺得文章不錯(cuò),可以把它分享出去讓更多的人看到吧!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。