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

項目背景

由於項目較大，有五個界面，每一個界面有四個子組件，每一個子組件都有一個table表格，需求是每一個界面的每一個table滾動到頂端表頭吸頂，因此嘗試用vuex作這種需求。

1、先聊js。

A.首先在vuex能夠這樣設置。

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} =data;
    state.techo[name]=type;
  }//更新吸頂狀態
複製代碼

B.在界面中咱們能夠這樣操做。

一、由於項目較大，如今main.js中定義全局混合。

Vue.mixin({
  methods:{
    scrollEvent(name){
      if(this.$refs[name]){//this.$refs[name]爲表格對象,必定要對錶格對象進行判斷，由於表格是動態添加的，可能爲空，會報錯。
        let Bottom = this.$refs[name].getBoundingClientRect().bottom,
            Top = this.$refs[name].getBoundingClientRect().top,
            Height = document.querySelector('.fixedNav').getBoundingClientRect().height;//fixedNav爲導航欄
        Top<=Height && Bottom>=Height
          ?this.$store.dispatch('setTecho',{name,type:true})
          :this.$store.dispatch('setTecho',{name,type:false});
      }
    }
  }
})
複製代碼

二、在methods中咱們能夠定義一個回調函數。

partScroll(){
    this.scrollEvent('partsFixed')
  }
複製代碼

三、在mouted裏面進行滾動監聽。

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

四、最後記得在destroyed裏面進行銷燬。

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

2、再聊佈局。

一、flex佈局模擬table表格。

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

二、table佈局。

實現方法：複製兩個徹底同樣的table，須要固定定位的table外面包裹div，而後進行定位（table佈局進行固定定位佈局會亂）。 好處：不須要寫太多的樣式，壞處：代碼量翻倍。

3、討論

各位有好的方法還能夠關注我的微信號（麥坤小子）共同探討。