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中多路由表頭吸頂實現的幾種布局方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！