项目背景

由于项目较大，有五个界面，每一个界面有四个子组件，每一个子组件都有一个table表格，需求是每一个界面的每一个table滚动到顶端表头吸顶，因此尝试用vuex作这种需求。javascript

1、先聊js。

A.首先在vuex能够这样设置。

1.在state文件中设置状态。vue

techo:{
    partsFixed:false,
    repairFixed:false，
    mateFixed:false,
    outRepairFixed:false
  }//吸顶状态
复制代码

2.在action中commit状态。java

export const setTecho=function ({commit},data) {
    commit(types.UPDATETECHO, {data})
}
复制代码

3.mutations中更新状态。vuex

[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里面进行销毁。flex

destroyed () {
  window.removeEventListener('scroll', this.partScroll)
}
复制代码

2、再聊布局。

一、flex布局模拟table表格。

这样作的好处就是代码量小，position：fixed。应用到flex中，布局不会乱。ui

二、table布局。

实现方法：复制两个彻底同样的table，须要固定定位的table外面包裹div，而后进行定位（table布局进行固定定位布局会乱）。 好处：不须要写太多的样式，坏处：代码量翻倍。this

3、讨论

各位有好的方法还能够关注我的微信号（麦坤小子）共同探讨。