淺談react.js中實現(xiàn)tab吸頂效果的問題
更新時間：2017年09月06日 07:55:43 作者：小少等等等
下面小編就為大家?guī)硪黄獪\談react.js中實現(xiàn)tab吸頂效果的問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
在react項目開發(fā)中有一個需求是，頁面滾動到tab所在位置時，tab要固定在頂部。
實現(xiàn)的思路其實很簡單，就是判斷當滾動距離scrollTop大于tab距離頁面頂部距離offsetTop時，將tab的position變?yōu)閒ixed。
在react中，我在state中設(shè)置一個navTop屬性，切換這個屬性的值為true或者false，然后tab標簽使用classnames()這個方法來利用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)這樣寫有問題，當我滾動條滾動距離達到條件時，tab是出現(xiàn)了吸頂?shù)男Ч?，但一瞬間又恢復(fù)了，滾動條也回彈了，一直無法繼續(xù)下拉。
我一開始以為判斷邏輯有問題，但一直找不到解決的辦法，后來我懷疑是state值改變的時間差導(dǎo)致的，好像陷入了一個死循環(huán)，然后我就在判斷滾動距離之前加了一個判斷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
})
}
}
這樣修改之后吸頂效果就正常了。
我認為就是setState方法導(dǎo)致的問題，setState本身是一個異步的方法，它還有一個參數(shù)是回調(diào)函數(shù)。
以上這篇淺談react.js中實現(xiàn)tab吸頂效果的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家詳細介紹了React通過hook封裝表格常用功能的使用,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以參考下2023-12-12
本篇文章主要介紹了React-Native中props具體使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
react.js組件實現(xiàn)拖拽復(fù)制和可排序的示例代碼
這篇文章主要介紹了react.js組件實現(xiàn)拖拽復(fù)制和可排序的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了react項目優(yōu)化配置,主要包括優(yōu)化配置CDN，優(yōu)化路由懶加載，結(jié)合示例代碼給大家介紹的非常詳細，對大家的學(xué)習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
在大型Web應(yīng)用中，一個常見的設(shè)計需求是讓某些組件具有吸頂效果，這意味著當頁面向下滾動時，該組件會保持在屏幕頂部，在本文中，我們將介紹如何在React項目中實現(xiàn)吸頂效果。我們將首先討論使用原生JavaScript領(lǐng)域的方法來實現(xiàn)，然后將這些方法與React結(jié)合起來2023-06-06
本篇文章主要介紹了官方推薦react-navigation的具體使用詳解，react-navigation是致力于解決導(dǎo)航卡頓，數(shù)據(jù)傳遞，Tabbar和navigator布局，支持redux。非常具有實用價值，需要的朋友可以參考下2018-05-05
React的事件系統(tǒng)和瀏覽器事件系統(tǒng)相比,主要增加了兩個特性：事件代理、和事件自動綁定,本文主要介紹了React 組件中實現(xiàn)事件代理,具有一定的參考價值,感興趣的可以了解一下2024-01-01
這篇文章主要介紹了react組件實例屬性props,本文結(jié)合實例代碼給大家簡單介紹了props使用方法，代碼簡單易懂，需要的朋友可以參考下2023-01-01
下面小編就為大家?guī)硪黄趓eact組件之間的參數(shù)傳遞(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
這篇文章主要為大家介紹了插件化機制優(yōu)雅封裝你的hook請求使用方式示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07