正文
vue,一路走来（17）--底部tabbar切换
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<router-link></router-link>存在router-link-active属性，那么底部tabbar切换就简单多了。不会再出现刷新回到第一个的bug。
<div class="tabbar">
<footer class="footer">
<router-link to='/Wechat' tag='li' class="footer__li--1"></router-link>
<router-link to='/Message' tag='li' class="footer__li--2"></router-link>
<router-link to='/Explore' tag='li' class="footer__li--3"></router-link>
<router-link to='/News' tag='li' class="footer__li--4"></router-link>
</footer>
<div style="height:50px;"></div>
</div>
<style lang='less'>
*{margin:;padding:;}
li,ol,ul{list-style: none;}
.tabbar {
.footer {
width:%;
position: absolute;
left:;
bottom:;
border-top:1px solid #ddd;
&__li--{
width: %;
height:50px;
background:url('/static/home.png') center no-repeat;
background-size: %;
float: left;
&.router-link-active {
background:url('/static/home-active.png') center no-repeat;
background-size: %;
}
}
&__li--{
width: %;
height:50px;
background:url('/static/information.png') center no-repeat;
background-size: %;
float: left;
&.router-link-active {
background:url('/static/information-active.png') center no-repeat;
background-size: %;
}
}
&__li--{
width: %;
height:50px;
background:url('/static/write.png') center no-repeat;
background-size: %;
float: left;
&.router-link-active {
background:url('/static/write-active.png')center no-repeat;
background-size: %;
}
}
&__li--{
width: %;
height:50px;
background:url('/static/me.png') center no-repeat;
background-size: %;
float: left;
&.router-link-active {
background:url('/static/me-active.png') center no-repeat;
background-size: %;
}
}
}
}
</style>
