vue專案多路由表頭吸頂實現的幾種佈局方式

麥坤小子發表於2019-04-10
Vue路由

專案背景

因為專案較大，有五個介面，每個介面有四個子元件，每個子元件都有一個table表格，需求是每個介面的每個table滾動到頂端表頭吸頂，所以嘗試用vux做這種需求，

一、先聊js。

A.首先在vux可以這樣設定。

1.在state檔案中設定狀態。

  techo:{
    partsFixed:false,
    repairFixed:false，
    mateFixed:false,
    outRepairFixed:false
  }//吸頂狀態
複製程式碼

2.在action中commit狀態。

export const setTecho=function ({commit},data) {
    commit(types.UPDATETECHO, {data})
}
複製程式碼

3.mutations中更新狀態。

  [types.UPDATETECHO](state,{data}){
    const {name,type,other} =data;
    for (let i in state.techo) {
      if(i===name){
        state.techo[i]=other;
        state.techo[name]=type;
      }
    }
  }//更新吸頂狀態
複製程式碼

B.在介面中我們可以這樣操作。

1、在methods中我們可以定義一個回撥函式。

  partScroll(){
    const evalPart = this.$refs.evalPart,//evalPart為表格物件
          evalTopTitle = document.querySelector('.fixedNav');//evalTopTitle為導航欄
    if(evalPart){
      let evalPartBottom = evalPart.getBoundingClientRect().bottom,
          evalPartTop = evalPart.getBoundingClientRect().top,
          evalTopTitleHeight = evalTopTitle.getBoundingClientRect().height;
      evalPartTop<=evalTopTitleHeight && evalPartBottom>=evalTopTitleHeight?
        this.$store.dispatch('setTecho',{name:"partsFixed",type:true,other:false})
        :this.$store.dispatch('setTecho',{name:"partsFixed",type:false,other:false});
    }
  },
  如果專案大，最好對函式進行封裝放到全域性混合。
  scrollEvent(evalPart,evalTopTitle,name){
    if(evalPart){//注意一定要對錶格物件進行判斷，因為表格是動態新增的，可能值為空，會報錯。
      let evalPartBottom = evalPart.getBoundingClientRect().bottom,
        evalPartTop = evalPart.getBoundingClientRect().top,
        evalTopTitleHeight = evalTopTitle.getBoundingClientRect().height;
      evalPartTop<=evalTopTitleHeight && evalPartBottom>=evalTopTitleHeight?
        this.$store.dispatch('setTecho',{name,type:true,other:false})
        :this.$store.dispatch('setTecho',{name,type:false,other:false});
    }
  },
partScroll(){
    const evalPart = this.$refs.evalPart,//evalPart為表格物件
      evalTopTitle = document.querySelector('.fixedNav');//evalTopTitle為導航欄
       this.scrollEvent(evalPart,evalTopTitle,'partsFixed')
}
複製程式碼

2、在mouted裡面進行滾動監聽。

mounted(){
  window.addEventListener('scroll',this.partScroll);
}
複製程式碼

3、最後記得在destroyed裡面進行銷燬。

destroyed () {
  window.removeEventListener('scroll', this.partScroll)
}
複製程式碼

二、再聊佈局。

1、flex佈局模擬table表格。

這樣做的好處就是程式碼量小，position：fixed。應用到flex中，佈局不會亂。

2、table佈局。

實現方法：複製兩個完全一樣的table，需要固定定位的table外面包裹div，然後進行定位（table佈局進行固定定位佈局會亂）。 好處：不需要寫太多的樣式，壞處：程式碼量較大。

三、討論

各位有好的方法還可以關注個人微訊號（麥坤小子）共同探討。

相關文章