一、样式
1.创建项目完毕后删除默认文件
2.assets文件里创建img和css文件夹
3.css里创建base.css,创建默认样式,并在app.vue中引用,@import "..."
4.写tabbar样式
(1)开启flex布局disp
(2)子元素:flex:1 均等分
text-align: center 子元素内部文字居中
height:49px 移动端底部导航栏一般高度都是49px
box-shadow: 0 -1px 1px rgba(100,100, 100, .2) 设置导航栏上面一条线的阴影
(3)开启定位,底部导航栏,设置背景颜色#f6f6f6
因为是底部导航栏,所以用fixd
position:fixd
left:0
right:0
bottom:0
二、封装上面的样式
1.compents文件夹里创建tabbar文件夹,创建TarBar文件
2.剪切放到template里面
<div id="tar-bar">
<div class="tab-bar-item">首页</div>
<div class="tab-bar-item">分类</div>
<div class="tab-bar-item">购物车</div>
<div class="tab-bar-item">我的</div>
</div>
3.剪切放到style里面,注意: @import不能剪掉,因为子组件里面不能用,会报错
#tar-bar{
display: flex;
background-color: #f6f6f6;
position: fixed;
left: 0;
right: 0;
bottom: 0;
box-shadow: 0 -1px 1px rgba(100,100, 100, .2);
}
.tab-bar-item{
flex:1;
text-align: center;
height: 49px;
}
4.引入TarBar到App.vue里面
import TabBar from './components/tabbar/TabBar.vue'
导入组件还要在components里面注册
components:{
TarBar
}
然后就可以在div里面使用了 注意:html里忽略大小写,不能用驼峰,所以只能用-
<tab-bar></tab-bar>
三、导入图片,这个简单,div里写img就行,然后style设置下样式即可
.tab-bar-item img{
width: 24px;
height: 24px;
}
四、重点,将Tarbar父元素里的div里的所有子组件封装,同时整个插槽,再创建子组件文件用tabbaritem
先在tarbar中加入插槽,再再tabbaritem中放入具名插槽,再app.vue文件中使用插槽,得用四次,相当于用四次这个组件,别忘了注册,不难理解
代码如下
App.vue:
<tab-bar>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/home.png" alt="">
<div slot="item-text">首页</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/categories.png" alt="">
<div slot="item-text">分类</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/shopcart.png" alt="">
<div slot="item-text">购物车</div>
</tab-bar-item>
<tab-bar-item>
<img slot="item-icon" src="./assets/img/tabbar/profile.png" alt="">
<div slot="item-text">我的</div>
</tab-bar-item>
</tab-bar>
TabBarItem:
<slot name ="item-icon"></slot>
<slot name ="item-text"></slot>
TarBar:
<slot></slot>
五、添加动态图标,即home_active等
1.在tabbaritem里添加新插槽,并在app文件中引用
<img slot="item-icon-active" src="./assets/img/tabbar/shopcart_active.png" alt="">
2.将tabbaritem中三个插槽同时用div包裹起来,再用v-if来判断并展示是否活跃时的图片
<div v-if="!isActive"> <slot name ="item-icon"></slot></div>
<div v-else><slot name ="item-icon-active"></slot></div>
这是文字是否变红,动态绑个class
3.别忘了在data中添加isA
<div :class="{active:isActive}"><slot name ="item-text"></slot></div>
ctive变量
六、改写vue-router
本来是这样:
export default new Router({
routers:[
]
})
改写:
const routers = [
{
path:
redirect:
},
{
path:
component:
}
]
const router = new Routers({
routers,
})
export default router
七、创建新文件夹views,视图,放的就是一系列子组件,注意不是导航栏子组件,区分开来
一个视图单独弄一个文件夹,文件夹里放子组件,比如/views/home/Home.vue
八、配置映射关系,别忘了router-view
在第六步的基础上使用懒加载引用,比如:
const Home =()=>import('...')
九、写入监听点击函数
注意:要在TabBarItem里面监听
<div class="tab-bar-item" @click="itemClick">
用props是因为父传子,父组件app的数据传给子组件TabBarItem,在子组件里写props
App.vue里面:比如:
<tab-bar-item path="/home">
TabBarItem里:
props:{
path: String
},
methods:{
itemClick(){
this.$router.replace(this.path).catch(err=>err)
}
}
最后改下哈希值
十、动态绑定字体颜色
在app中的tabbaritem标签添加 activeColor = "blue"
然后通过props传过去
props:{
activeColor:{
type:String,
default:'red'
}
},
但是传过去要去使用,如下v-bind:style...
<div :style="activeStyle"><slot name ="item-text"></slot></div>
在计算属性中添加activeStyle
下面是用来判断tabbaritem中的四个组件是否活跃
isActive(){
return this.$route.path.includes(this.path) == this.$route.path
也就是index.js里的path,this.path是tabbaritem中由app传过来的动态的path,如果相同那就是处于活跃,就返回true
},
activeStyle(){
return this.isActive ? {color:this.activeColor} : {}
}
},