vue中多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式

發(fā)布時間：2020-08-19 13:58:06 來源：腳本之家閱讀：167 作者：麥坤小子欄目：web開發(fā)

vue項(xiàng)目多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式

因?yàn)轫?xiàng)目較大，有五個界面，每個界面有四個子組件，每個子組件都有一個table表格，需求是每個界面的每個table滾動到頂端表頭吸頂，所以嘗試用vux做這種需求，

一、先聊js。

A.首先在vux可以這樣設(shè)置。

1.在state文件中設(shè)置狀態(tài)。

techo:{
 partsFixed:false,
 repairFixed:false，
 mateFixed:false,
 outRepairFixed:false
 }//吸頂狀態(tài)

2.在action中commit狀態(tài)。

export const setTecho=function ({commit},data) {
 commit(types.UPDATETECHO, {data})
}

3.mutations中更新狀態(tài)。

[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;
  }
 }
 }//更新吸頂狀態(tài)

B.在界面中我們可以這樣操作。

1、在methods中我們可以定義一個回調(diào)函數(shù)。

partScroll(){
 const evalPart = this.$refs.evalPart,//evalPart為表格對象
   evalTopTitle = document.querySelector('.fixedNav');//evalTopTitle為導(dǎo)航欄
 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});
 }
 },

如果項(xiàng)目大，最好對函數(shù)進(jìn)行封裝放到全局混合。

scrollEvent(evalPart,evalTopTitle,name){
 if(evalPart){//注意一定要對表格對象進(jìn)行判斷，因?yàn)楸砀袷莿討B(tài)添加的，可能值為空，會報(bào)錯。
  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為導(dǎo)航欄
  this.scrollEvent(evalPart,evalTopTitle,'partsFixed')
}

2、在mouted里面進(jìn)行滾動監(jiān)聽。

mounted(){
 window.addEventListener('scroll',this.partScroll);
}

3、最后記得在destroyed里面進(jìn)行銷毀。

destroyed () {
 window.removeEventListener('scroll', this.partScroll)
}

總結(jié)

以上所述是小編給大家介紹的vue中多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！

向AI問一下細(xì)節(jié)

vue中多路由表頭吸頂實(shí)現(xiàn)的幾種布局方式

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽