vue知识点-TabBar实现点击对应图标实现跳转

在src/components下新建一个文件夹：tabbar

在该文件夹下创建两个vue文件：TabBar.vue和TabBarItem.vue

1、在TabBar.vue文件中：设置tab-bar的样式
　　<template>

　　　　<div id="tab-bar">

　　　　　　<slot></slot>

　　　　</div>

　　</template>

　　<script>

　　　　export default{

　　　　　　name:"TabBar"

　　　　}

       </script>

　　

　　<style scoped>

#tab-bar {
  display: flex;
  background-color: #f6f6f6;

  position: fixed;
  left:0;
  right:0;
  bottom: 0;

  box-shadow: 0 -1px 1px rgba(100,100,100,.1);
}

　　</style>

　　

2、TabBarItem.vue:设置各个分类的样式和其他方法

　　具名插槽：在使用的时候需要添加名字

<template>

　　<div class="tab-bar-item" @click="itemClick">

　　　　<div v-if="!isActive">　　

　　　　　　<slot name="item-icon"></slot>

　　　　</div>

　　　　<div v-else>

　　　　　　<slot name="item-icon-active"></slot>

　　　　</div>

　　　　<div :class="{active:isActive}">

　　　　　　<slot name="item-text"></slot>

　　　　</div>

　　</div>

</template>

<script>

　　export default{

　　　　name:"TabBarItem",

　　　　props:{

　　　　　　path:String,

　　　　},

　　　　data(){

　　　　　　return {

　　　　　　　　isActive:true

　　　　　　}

　　　　},

　　　　methods:{

　　　　　　itemClick(){

　　　　　　　　this.$router.push(this.path)

　　　　　　}

　　　　}

　　}

</script>

<style scoped>

.tab-bar-item{
  flex:1;
  text-align: center;
  height:49px;
}
.tab-bar-item img{
  margin-top:3px;
  18px;
  height:18px;
  vertical-align: middle;
  margin-bottom: 2px;
}
.active{
  color: red;
}

</style>

3、在App.vue中引用：

　　<template>

　　　　<div id="app">　　

　　　　　　<router-view></router-view>

<tab-bar>
    <tab-bar-item path="/home">
      <img slot='item-icon' src="./assets/img/tabbar/首页.svg" alt="">
      <img slot='item-icon-active' src="./assets/img/tabbar/home_active.svg" alt="">
      <div slot="item-text">首页</div>
    </tab-bar-item>
    <tab-bar-item path="/category">
      <img slot='item-icon' src="./assets/img/tabbar/分类.svg" alt="">
      <img slot='item-icon-active' src="./assets/img/tabbar/goods_active.svg" alt="">
      <div slot="item-text">分类</div>
    </tab-bar-item>
    <tab-bar-item path="/cart">
      <img slot='item-icon' src="./assets/img/tabbar/购物车空.svg" alt="">
      <img slot='item-icon-active' src="./assets/img/tabbar/shopcart_active.svg" alt="">
      <div slot="item-text">购物车</div>
    </tab-bar-item>
    <tab-bar-item path="/profile">
      <img slot='item-icon' src="./assets/img/tabbar/我的.svg" alt="">
      <img slot='item-icon-active' src="./assets/img/tabbar/mine_active.svg" alt="">
      <div slot="item-text">我的</div>
    </tab-bar-item>
  </tab-bar>

       　　</div>

　　</template>

　　

　　<script>

　　　　import TabBar from './compnents/tabbar/TabBar.vue'

　　　　import TabBarItem from './components/tabbar/TabBarItem.vue'

　　　　export default {

　　　　　　name:"App",

　　　　　　components: {　　

　　　　　　　　TabBar,

　　　　　　　　TabBarItem

　　　　　　}

　　　　}

　　</script>

　　<style>

　　　　@import url('./assets/css/base.css')

　　</style>