欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-03-21 17:16:23
vue项目多路由表头吸顶实现的几种布局方式 因为项目较大,有五个界面,每个界面有四个子组件,每个子组件都有一个table表格,需求是每个界面的每个table滚动到顶端表头...

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)
}

总结

以上所述是小编给大家介绍的vue中多路由表头吸顶实现的几种布局方式,希望对大家有所帮助