vue中多路由表头吸顶实现的几种布局方式
程序员文章站
2022-07-03 21:45:48
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中多路由表头吸顶实现的几种布局方式,希望对大家有所帮助
上一篇: View体系和自定义View总结
下一篇: 它能让你变成肥婆啊