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)文章
vue.js實現(xiàn)刷新當(dāng)前頁面的方法教程
這篇文章主要給大家介紹了關(guān)于vue.js實現(xiàn)刷新當(dāng)前頁面的方法教程，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-07-07
這篇文章主要介紹了vue父子組件的互相傳值和調(diào)用，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了vue3如何實現(xiàn)變量雙向綁定問題,具有很好的參考價值,希望對大家有所幫助,2023-11-11
這篇文章主要介紹了vue自定義上傳頭像組件功能,介紹了與一般上傳組件的區(qū)別,通過實例代碼介紹了上傳圖片組件的方法,需要的朋友可以參考下2024-01-01
這篇文章主要介紹了vue3+ts使用APlayer的示例代碼，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
Vue3學(xué)習(xí)筆記之依賴注入Provide/Inject
provide和inject可以實現(xiàn)嵌套組件之間進(jìn)行傳遞數(shù)據(jù),這兩個函數(shù)都是在setup函數(shù)中使用的,下面這篇文章主要給大家介紹了關(guān)于Vue3學(xué)習(xí)筆記之依賴注入Provide?/?Inject的相關(guān)資料,需要的朋友可以參考下2023-05-05
vue組件 keep-alive 和 transition 使用詳解
這篇文章主要介紹了vue組件 keep-alive 和 transition 使用詳解,需要的朋友可以參考下2019-10-10
pinia是vue3官方的狀態(tài)管理工具,當(dāng)然vue2也可以用,vue2中的狀態(tài)管理工具是vuex,vue3中不再使用vuex,推薦使用的是pinia,和vuex差不多,但比vuex更方便、更強、更好,下面這篇文章主要給大家介紹了關(guān)于Vue3之Pinia狀態(tài)管理的相關(guān)資料,需要的朋友可以參考下2022-11-11
vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development
這篇文章主要介紹了vue配置生產(chǎn)環(huán)境.env.production與測試環(huán)境.env.development方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3.0+element表格獲取每行數(shù)據(jù)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3.0+element表格獲取每行數(shù)據(jù)的相關(guān)資料,在element-ui中,你可以通過為表格的行綁定單擊事件來獲取表格中的一行數(shù)據(jù),需要的朋友可以參考下2023-09-09