h5之vue自定义底部导航栏

代码

Item.vue

<template>
    <div class="itemWarp flex_mid" @click='changePage'>
        <span v-show='!bol'>
            <slot name='normalImg'></slot>
        </span>
        <span v-show='bol'>
            <slot name='activeImg'></slot>
        </span>
        <span v-text='txt'></span>
    </div>
</template>
<script type="text/javascript">
    export default{
        name: 'Item',
        props:{
            txt:{
                type:String
            },
            page:{
                type:String
            },
            sel:{
                type:String
            }
        },
        computed:{
            bol: function(){
                if(this.sel == this.page){
                    return true;
                }
                return false;
            }
        },
        methods:{
            changePage:function(){
                //点击跳转对应的页面
                this.$router.push('/'+this.page);
                this.$emit('change',this.page)
            }
        }
    }
</script>
<style type="text/css">
    .itemWarp{
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }
    .itemWarp span{
        font-size: 12px;
    }
</style>

Tabbar.vue

<template>
    <div class="tabberWarp" >
        <div class="warp">
            <Item :txt='item.txt' :page='item.page' @change='getVal' v-for='item in tabbarDes':sel='selected'>
                <img :src="item.normalImg" slot='normalImg'>
                <img :src="item.activeImg" slot='activeImg'>
            </Item>
        </div>
    </div>
</template>
<script type="text/javascript">
    import Item from './Item.vue'
    export default{
        components:{
            Item
        },
        data:function(){
            return{
                selected:'skin',
                tabbarDes:[                                                     
                    {
                        txt:'账号',
                        page:'account',
                        normalImg:require('../assets/images/1.jpg'),
                        activeImg:require('../assets/images/2.jpg')
                    },
                    {
                        txt:'设置',
                        page:'setup',
                        normalImg:require('../assets/images/3.jpg'),
                        activeImg:require('../assets/images/4.jpg')
                    }
                ]
            }
        },
        methods:{
            getVal:function(res){
                this.selected = res;
            }
        }
    }
</script>
<style type="text/css">
    .warp{
        width: 100%;
        border-top: 1px solid #eee;
        background: #fff;
        display: flex;
        align-items: center;
        justify-content: space-around;
        font-size: 0;
    }
    .warp img{
        width: 20px;
        height: 20px;
    }
    .tabberWarp img{
        margin-top: 10px;
        margin-bottom: 5px;
 
    }
    .tabberWarp{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        padding-bottom: 5px;
        background: #fff;
    }
</style>

app.vue

<tabbar></tabbar>

import Tabbar from './components/Tabbar.vue'

components:{ Tabbar },