vue中多路由表頭吸頂實現(xiàn)的幾種布局方式
更新時間：2019年04月12日 08:29:48 作者：麥坤小子
這篇文章主要介紹了vue項目多路由表頭吸頂實現(xiàn)的幾種布局方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
vue項目多路由表頭吸頂實現(xiàn)的幾種布局方式
因為項目較大，有五個界面，每個界面有四個子組件，每個子組件都有一個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});
}
},
如果項目大，最好對函數(shù)進(jìn)行封裝放到全局混合。
scrollEvent(evalPart,evalTopTitle,name){
if(evalPart){//注意一定要對表格對象進(jìn)行判斷，因為表格是動態(tài)添加的，可能值為空，會報錯。
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中多路由表頭吸頂實現(xiàn)的幾種布局方式，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)商品放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了Vue3實現(xiàn)獲取驗證碼按鈕倒計時效果,用戶點擊獲取驗證碼按鈕,發(fā)送請求給后端,按鈕失效,并且開始倒計時60秒；在此期間,用戶無法再次點擊按鈕,即使用戶刷新頁面,倒計時依然存在,直到倒計時完畢,按鈕恢復(fù),感興趣的小伙伴跟著小編一起來看看吧2024-10-10
本文通過實例給大家詳細(xì)介紹了Vuejs與form元素的相關(guān)知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2016-09-09
如果你也和我一樣，按照正常的流程下載并且配置了stylus，但是依舊報錯，也許這篇文章就是你的菜，一起來看看吧2022-08-08
vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法
這篇文章主要介紹了vue中pinia數(shù)據(jù)一直重復(fù)獲取之前的值的解決方法,如果想讓pinia數(shù)據(jù)不會重復(fù)獲取之前的值需要手動強(qiáng)制觸發(fā) Pinia store 的狀態(tài)更新,文中有詳細(xì)的解決方法,需要的朋友可以參考下2024-04-04
VsCode工具開發(fā)vue項目必裝插件清單(推薦!)
對于很多使用vscode編寫vue項目的新手同學(xué)來說,可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于VsCode工具開發(fā)vue項目必裝插件的相關(guān)資料,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
這篇文章主要給大家介紹了關(guān)于vue3使用百度地圖的相關(guān)資料,最近一個項目要用到地圖，因為微信小程序用的也是百度地圖，所以想著網(wǎng)頁端也用百度地圖,需要的朋友可以參考下2023-07-07
本篇文章主要介紹了Vue組件通信實踐記錄（推薦），小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-08-08
解決vue prop傳值default屬性如何使用,為何不生效的問題
這篇文章主要介紹了解決vue prop傳值default屬性如何使用,為何不生效的問題。具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
這篇文章主要介紹了關(guān)于vue3中的reactive賦值問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05