1. 程式人生 > >React制作吸頂功能總結

React制作吸頂功能總結

onscroll 生命 制作 百度 dom元素 展示 document react width

總結一下最近用react寫項目時,遇到的一些坑,恩,真的還蠻坑的,主要是設置狀態的時候特別不好控制,下面我們一起來看下,這裏自己做了幾個demo,分別看下,

主頁面代碼如下:

class Head extends React.Component {
            constructor(props) {
                super(props);
                this.state = {
                     contentClass:"conditionArea"
                };
                this.windowOnScroll();
                let isScrollTop = true;
            };
            windowOnScroll(){
                let _this = this;
                window.onscroll = function(){
                     //獲取滾動條滾動的距離
                    let h = document.body.scrollTop; 
                    console.log(h); 
                    if(h > 74){
                        console.log(‘111‘);
                        _this.setState({
                            contentClass:"conditionArea conditionArea_fixed"
                        });
                    }else{
                        _this.setState({
                            contentClass:"conditionArea"
                        });
                    }
                }
            };
            render() {
                return (
                  <div className="container">
                      <div className="set_head_fixed">
                          <span className="set_text">我是頭部</span>
                      </div>
                      <div id="conditionArea" className={this.state.contentClass}>
                            <div className="content_name">
                                <span>置頂塊</span>
                            </div>           
                      </div>
                      <div className="set_displayContent">
                           <p>內容區域</p>
                      </div>
                  </div>
                );
            }
        };
        function APP (){
           return (
              <div className="head_top ">
                      <Head  title="頭部" />

              </div>
           )
        };
        ReactDOM.render(
          <APP />,
          document.getElementById(‘demo‘)
        ); 

1:頭部與吸頂的塊,一起移動的問題

問題:鼠標滾動到頂部時候,狀態一直在更改,我們來看下效果圖:

技術分享 技術分享

看吧,很明顯,這是一個bug,有問題,那我們繼續改,為什麽狀態一直在更改呢,這裏我們可以用一個變量來進行控制,邏輯大概是,當滾輪達到頂部時

將其置為false,那它的狀態就只會更改一次了。我們來看下核心代碼,其它代碼不再貼了。

if(h > 74){
        if(isScrollTop){
                 console.log(‘111‘);
                 isScrollTop = false;
                  _this.setState({
                        contentClass:"conditionArea conditionArea_fixed"   
                 });
                       
         }else{
                 console.log("333");
                 _this.setState({
                       contentClass:"conditionArea"
                 });
         }
}

我們來看下控制臺打印出來的結果:為什麽會出現這麽多3呢?首先,有兩種情況,一種用戶向上滑動,然後向下滑動,另外就是,向上滑動-向下滑動-向上滑動操作

因此,當小於74px的時候,我們同樣要控制它的狀態。

技術分享 控制後的結果 技術分享

ok,我們狀態控制好啦,代碼如下:

 if(h > 74){
            if(isScrollTop){
                      console.log(‘111‘);
                       isScrollTop = false;
                      _this.setState({
                               contentClass:"conditionArea conditionArea_fixed"
                       });
              } 
 }else{
             if(!isScrollTop){
                      console.log("333");
                       isScrollTop = true;
                       this.setState({
                                 contentClass:"conditionArea"
                       });
              }
                        
 }

2:頭部固定,吸頂的塊移動

技術分享

與上面的區別是定位的問題,這裏要註意一下,無論上面哪種,吸頂的塊都應該是由position:absolute 變為 position : fixed,經博主檢測,使用position : relative會出現問題

在微信打開,qq瀏覽器,UC瀏覽器,百度瀏覽器打開均會出現卡頓,反應慢的問題,後來我就用了absolute進行定位,問題就好啦,另外,註意解決fixed的兼容性問題,setState的

做法有問題,setState是異步的,沒辦法做到立馬將效果展示出來,必要時候直接操作DOM元素來解決問題。

css樣式如下:

body {
    display: block;
    margin: 0px;
    padding: 0px;
    color: #fff;
}
.set_head_fixed{
	border:1px solid  red;
	width:100%;
	height:74px;
	background-color: #54B6E3;
	color: #fff;
	text-align: center;	
	position: relative;
}
.set_text{
	margin-top: 5px;
}
.conditionArea{
	width: 100%;
	height: 80px;
    background-color:#66C6AD;
    border: 1px  solid  blue; 
    text-align: center;	
    position: absolute;
}
.conditionArea_fixed{
	position: fixed;
	top: 0px;
	z-index: 44;
}
.set_displayContent{
	position: relative;
    margin: 60px 10px;
    height: 1700px;
    background: #fc9720;
    border-radius: 8px;
}

其實,感覺,利用變量來控制狀態是非常好的辦法,關鍵是要知道什麽時候去控制它,調用它。

3:關於setState函數

特點:

1:是異步函數。

2: this.setState 還沒有被調用;

3: 批量執行 State 轉變時讓 DOM 渲染更快(相對比一個一個的setState的來的快)。

同步更新方法:

1:直接操作DOM

2: 在componentWillUpdate生命周期或者componentDidUpdate生命周期的回調函數去執行我們的操作。

componentDidMount(){
       //執行操作
 };

3:回調函數

this.setState({},()=>{
         //執行操作
});

React制作吸頂功能總結