JavaScript

超轻量级php框架startmvc

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

更新时间:2020-08-21 10:36:01 作者:startmvc
vue项目多路由表头吸顶实现的几种布局方式因为项目较大,有五个界面,每个界面有四个子

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中多路由表头吸顶实现的几种布局方式,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持! 如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

vue吸顶 vue 多路由