淺談react.js中實(shí)現(xiàn)tab吸頂效果的問題
在react項(xiàng)目開發(fā)中有一個(gè)需求是，頁面滾動(dòng)到tab所在位置時(shí)，tab要固定在頂部。
實(shí)現(xiàn)的思路其實(shí)很簡單，就是判斷當(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ù)男Ч?，但一瞬間又恢復(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ù)。
以上這篇淺談react.js中實(shí)現(xiàn)tab吸頂效果的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
使用React封裝一個(gè)Tree樹形組件的實(shí)例代碼
這篇文章主要介紹了使用React封裝一個(gè)Tree樹形組件的實(shí)例,文中通過代碼示例講解的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-03-03
React中useTransition鉤子函數(shù)的使用詳解
React?18的推出標(biāo)志著React并發(fā)特性的正式到來,其中useTransition鉤子函數(shù)是一個(gè)重要的新增功能,下面我們就來學(xué)習(xí)一下useTransition鉤子函數(shù)的具體使用吧2024-02-02
React+Vite從零搭建項(xiàng)目及配置的實(shí)現(xiàn)
本文主要介紹了React+Vite從零搭建項(xiàng)目及配置的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
React如何使用Portal實(shí)現(xiàn)跨層級DOM渲染
Portal 就像是一個(gè)“傳送門”,能讓你把組件里的元素“傳送到”其他 DOM 節(jié)點(diǎn)下面去渲染,下面小編就來和大家簡單介紹一下具體的使用方法吧2025-04-04
這篇文章主要為大家介紹了React?Fiber?鏈表操作原理詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了React Router v4 入坑指南(小結(jié))，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-04-04
React組件化的一些額外知識(shí)點(diǎn)補(bǔ)充
React是一個(gè)用于構(gòu)建用戶界面的JavaScript庫,下面這篇文章主要給大家介紹了關(guān)于React組件化的一些額外知識(shí)點(diǎn),文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-10-10
關(guān)于useEffect執(zhí)行兩次的問題及解決
這篇文章主要介紹了關(guān)于useEffect執(zhí)行兩次的問題及解決，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
React 的調(diào)和算法Diffing 算法策略詳解
React的調(diào)和算法，主要發(fā)生在render階段，調(diào)和算法并不是一個(gè)特定的算法函數(shù)，而是指在調(diào)和過程中，為提高構(gòu)建workInProcess樹的性能，以及Dom樹更新的性能，而采用的一種策略，又稱diffing算法2021-12-12
如何在 React 中調(diào)用多個(gè) onClick 函數(shù)
這篇文章主要介紹了如何在React中調(diào)用多個(gè)onClick函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-11-11