背景:在H5的开发中,已经会遇到底部导航栏,三列布局,用户可以点击不同的位置,进行切换。一列中上面是图标,下面是文字。因为导航是公共部分,所以在vue项目中,可以把导航抽离出来,作为一个父组件进行调用。
一、html部分
<template>
<div class="main>
<keep-alive exclude="forgeMe">
<router-view class="main_page" ref="child"/>
</keep-alive>
<ul class="tabs">
<li v-for="(item,index) in tabs" :key="index" :class="[index == pageIdx?'active':'']" @click="changepage(index)">
<img :src="require('@/assets/images/tabs_0'+(Number(index)+1)+(index==pageIdx>'_active.png':'.png'))">
<span>{{item}}</span>
</li>
</ul>
</div>
</template>
二、js部分
<script>
/*eslint-disable*/
export default {
created(){
var urlParams = this.TOOL.getURLParams(window.location.href);
this.CONFIG.head.productToken = urlParams.productToken;
this.changepage(1);
},
watch:{
$router(to,from){
let idx;
switch (to,name){
case 'ProductIntroduction':
idx="0";
break;
case 'InformationEntry':
idx="1";
break;
case 'CalculationResults':
idx="1";
break;
case 'ProductTerms':
idx="2";
break;
}
this.pageIdx = idx;
}
},
methods:{
changepage(idx){
this.pageIdx=idx;
let pathName,para;
switch(idx){
case 0:
pathName="ProductIntroduction";
break;
case 1:
pathName="InformationEntry";
this.doNext();
break;
case 2:
pathName="ProductTerms";
break;
default:
pathName="InformationEntry";
break;
}
if(this.$router.name=="CalculationReults" || this.$router.name=="PremiumCalculationMain"){//结果页面返回时不记录
this.$router.replace({name:pathName})
}else{
this.$router.push({name:pathName})
}
},
doNext(){
if(this.$ref['child']){
this.$refs['child'].$emit('handleChange');
}
},
},
components;{},
data(){
return{
tabs:["产品介绍","计划书","条款与须知"],
pageIdx:'',
}
},
}
</script>
三、css部分
<style scoped>
.tabs{position:fixed;bottom:0;left:50%;width:100%;transform:translate(-50%,0);max-width:940px;background:#fff;z-index:10;}
.tabs li{padding:5px 0;display:inline-block;width:33.33%;text-align:center;}
.tabs img{width:30px;display:block;margin:0 auto;}
.tabs span{color:#aaa;margin-top:2px;}
.active span{color:#333;}
.main{height:100%;}
.main_page{height:calc(100% -65px);overflow:auto;}
</style>
相关图片如下所示: