项目第一天底部导航组件(自己写)
2018-10-18 本文已影响0人
蜗牛和曼巴
1.页面结构
div.nav-footer>div.nav-footer-item*4>span.iconfont+span{xxx}
2.样式
.nav-footer {
font-size: 16px;
display: flex;
position: fixed;
bottom: 0;
height: 50px;
width: 100%;
border-top: 1px solid #e7e7e7;
background-color: #fff;
.nav-footer-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 25%;
.badge {
position: absolute;
top: 3%;
left: 50%;
width: 14px;
height: 14px;
border-radius: 7px;
background-color: #e4393c;
text-align: center;
line-height: 14px;
color: white;
font-size: 12px;
}
}
}
.active {
color: #26a2ff;
}
3.给底部导航里各个div或者li绑定双向数据和排他
:class="path==='/home' ? 'active' : ''"
4.定义path
并获取
return {
path: this.$route.path
}
5.给导航绑定一个点击事件
@cllick='jumpTo('home')'
6.定义函数记得传值name
methods: {
jumpTo (name) {
this.$router.push({name: name})
}
}
7.组件写完了记得在需要用到的组件页面中使用它,还有记得挖坑
import TabBar from '@/components/tab-bar'
export default {
components: {
TabBar
}
}