React實現底部footer針對頁面進行自適應

前言

需求是要求底部footer在頁面中相對也屏幕進行適配，就是說當屏幕的東西超出一屏幕的時候須要在頁面最後一個元素後面，
不足一屏幕的時候須要定位在下面，其實分析一下這個需求只要判斷好頁面的高度和內容進行定位就能夠
複製代碼

大概構思

1.我是這樣判斷的首先獲取底部footer相對於頂部的高度
2.用頁面總體的高度和底部footer相對於頂部的高度進行判斷,
若是總體高度大於footer相對於頂部的高度證實沒有超出屏幕須要加定位定位到屏幕下面，
相反小於的話就說明超出了內容超出屏幕移除定位
3.還須要判斷一下底部footer相鄰的元素對於底部的距離
4.若是大於一個footer的狀況下證實正好貼近底部可是還沒超出這時候會有問題
5.因此當相鄰元素距離底部的高度大於一個footer的時候也加定位和第一個條件是而且關係
複製代碼

上代碼

1.獲取底部footer相對於頂部的高度

js

componentDidMount() {
     //dom生成以後 多是dom生成須要時間因此加一個延遲
     setTimeout(() => {
         let hei = document.querySelector('body').offsetHeight//整個窗口的高度
         let footerTop = this.footer.offsetTop //底部footer相對於頂部的距離
     })
 }

複製代碼

2.用頁面總體的高度和底部footer相對於頂部的高度進行判斷,

若是總體高度大於footer相對於頂部的高度證實沒有超出屏幕須要加定位定位到屏幕下面，
相反小於的話就說明超出了內容超出屏幕移除定位
複製代碼

js

componentDidMount() {
     //dom生成以後 多是dom生成須要時間因此加一個延遲
     setTimeout(() => {
         let hei = document.querySelector('body').offsetHeight//整個窗口的高度
         let footerTop = this.footer.offsetTop //底部footer相對於頂部的距離
         if (hei > footerTop) {
             //沒有超出一屏幕高度 須要加定位
             this.footer.classList.add("footerPosi")
         } else {
              this.footer.classList.remove("footerPosi")
         }
     })
 }

複製代碼

css

.footerPosi{
     position: absolute;
     bottom: 0;
 }
複製代碼

3.還須要判斷一下底部footer相鄰的元素對於底部的距離

componentDidMount() {
     //dom生成以後 多是dom生成須要時間因此加一個延遲
     setTimeout(() => {
         let hei = document.querySelector('body').offsetHeight//整個窗口的高度
         let footerTop = this.footer.offsetTop //底部footer相對於頂部的距離
         let footerHei = this.footer.offsetHeight
         let broNode = this.footer.previousSibling //相鄰footer的節點
         let broNodeHei = hei - (broNode.offsetHeight + broNode.offsetTop)//距離底部的距離 用總體的高度減去底部相鄰元素的自身高度和相對於頂部高度之和就是相對於底部的距離
         if (hei > footerTop && broNodeHei > footerHei) {
             //沒有超出一屏幕高度 須要加定位
             this.footer.classList.add("footerPosi")
         } else {
             this.footer.classList.remove("footerPosi")
         }
     })
 }

複製代碼

出現的Bug

1一旦請求接口當有接口數據的時候頁面完全就亂了😂😂😂(還天真的覺得這樣就行了呢)
2.須要在componentWillReceiveProps從新計算一下由於當接口請求完以後頁面會觸發footer的props更新
3.在頁面之間切換的時候可能到下一個頁面會保留上一個頁面遺留的計算結果，因此到頁面中要提早清楚一次定位
複製代碼

解決Bug

1.後來我封裝了一個方法把須要更新的東西都放在一個裏面在DidMount 和WillReceiveProps執行

resetFooter() {
     this.footer.classList.remove("footerPosi") //
     let hei = document.querySelector('body').offsetHeight//整個窗口的高度
     let footerTop = this.footer.offsetTop //底部footer相對於頂部的距離
     let footerHei = this.footer.offsetHeight
     let broNode = this.footer.previousSibling //相鄰footer的節點
     let broNodeHei = hei - (broNode.offsetHeight + broNode.offsetTop)//距離底部的距離
     if (hei > footerTop && broNodeHei > footerHei) {
         //沒有滾動條 須要定位
         this.footer.classList.add("footerPosi")
     } else {
         this.footer.classList.remove("footerPosi")
     }
 }
 
  componentDidMount() {
     //dom生成以後
     setTimeout(() => {
         this.resetFooter()
     })
  }
  componentWillReceiveProps() {
     setTimeout(() => {
         this.resetFooter()
     })
  }
複製代碼

總結

1.在作以前想的有點簡單作的時候才發現須要注意的地方有不少好比切換頁面中須要清楚一次定位
2.還有當一個屏幕正好滿可是沒有超出的時候
3.這一次作個總結但願下次再也不走重複的bug
複製代碼

最後

若是那裏有問題請不吝賜教💪💪💪