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