Several layout methods for multi-routing table head ceiling implementation of vue project
Because the project is large, there are five interfaces, each interface has four subcomponents, and each subcomponent has a table. The requirement is that each table in each interface scrolls to the top table header to the ceiling, so try to use vux to do this requirement.
1. Let’s talk about js first.
A. First of all, you can set it like this in vux.
1. Set the status in the state file.
techo:{
partsFixed:false,
repairFixed:false，
mateFixed:false,
outRepairFixed:false
}//Ceiling status
2. Commit state in action.
export const setTecho=function ({commit},data) {
commit(, {data})
}
Update status in .
[](state,{data}){
const {name,type,other} =data;
for (let i in ) {
if(i===name){
[i]=other;
[name]=type;
}
}
}//Update ceiling status
B. We can operate this way in the interface.
1. In methods we can define a callback function.
partScroll(){
const evalPart = this.$,//evalPart is a table object evalTopTitle = ('.fixedNav');//evalTopTitle is the navigation bar if(evalPart){
let evalPartBottom = ().bottom,
evalPartTop = ().top,
evalTopTitleHeight = ().height;
evalPartTop<=evalTopTitleHeight && evalPartBottom>=evalTopTitleHeight?
this.$('setTecho',{name:"partsFixed",type:true,other:false})
:this.$('setTecho',{name:"partsFixed",type:false,other:false});
}
},
If the project is large, it is best to encapsulate the functions and put them in global mixing.
scrollEvent(evalPart,evalTopTitle,name){
if(evalPart){//Note that you must judge the table object, because the table is added dynamically and the value may be empty, and an error will be reported. let evalPartBottom = ().bottom,
evalPartTop = ().top,
evalTopTitleHeight = ().height;
evalPartTop<=evalTopTitleHeight && evalPartBottom>=evalTopTitleHeight?
this.$('setTecho',{name,type:true,other:false})
:this.$('setTecho',{name,type:false,other:false});
}
},
partScroll(){
const evalPart = this.$,//evalPart is a table object evalTopTitle = ('.fixedNav');//evalTopTitle is the navigation bar (evalPart,evalTopTitle,'partsFixed')
}
2. Scroll monitoring in the clicked.
mounted(){
('scroll',);
}
3. Finally, remember to destroy it in destroy.
destroyed () {
('scroll', )
}
Summarize
The above are several layout methods for implementing multi-routing table header ceiling in VUE introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!