vue项目多路由表头吸顶实现的几种布局方式

ゞ浴缸里的玫瑰 2022-10-01 05:41 174阅读 0赞

## 项目背景 ##

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

# 一、先聊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.在界面中我们可以这样操作。 ###

1、因为项目较大，现在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});
          }
        }
      }
    })
    复制代码

2、在methods中我们可以定义一个回调函数。

partScroll(){
        this.scrollEvent('partsFixed')
      }
    复制代码

3、在mouted里面进行滚动监听。

mounted(){
      window.addEventListener('scroll',this.partScroll);
    }
    复制代码

4、最后记得在destroyed里面进行销毁。

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

# 二、再聊布局。 #

### 1、flex布局模拟table表格。 ###

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

### 2、table布局。 ###

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

# 三、讨论 #