溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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中多路由表頭吸頂實現的幾種布局方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
如果你覺得本文對你有幫助，歡迎轉載，煩請注明出處，謝謝！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
