vant 底部导航组件的实现(tabbar)

时间:2019-03-25
本文章向大家介绍vant 底部导航组件的实现(tabbar),主要包括vant 底部导航组件的实现(tabbar)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
<template>
    <van-tabbar v-model="active" class="active_tab">
        <van-tabbar-item>
            <router-link to="/home">
                <span>首页</span>
            </router-link>
            <template slot="icon" slot-scope="props">
                <img :src="props.active ? home_icon.active : home_icon.normal"/>
            </template>
        </van-tabbar-item>

        <van-tabbar-item>
            <router-link to="/category">
                <span>分类</span>
            </router-link>
            <template slot="icon" slot-scope="props">
                <img :src="props.active ? category_icon.active : category_icon.normal"/>
            </template>
        </van-tabbar-item>

        <van-tabbar-item>
            <router-link to="/message">
                <span>消息</span>
            </router-link>
            <template slot="icon" slot-scope="props">
                <img :src="props.active ? message_icon.active : message_icon.normal"/>
            </template>
        </van-tabbar-item>

        <van-tabbar-item>
            <router-link to="/cart">
                <span>购物车</span>
            </router-link>
            <template slot="icon" slot-scope="props">
                <img :src="props.active ? cart_icon.active : cart_icon.normal"/>
            </template>
        </van-tabbar-item>


        <van-tabbar-item>
            <router-link to="/mine">
                <span>我的</span>
            </router-link>
            <template slot="icon" slot-scope="props">
                <img :src="props.active ? mine_icon.active : mine_icon.normal"/>
            </template>
        </van-tabbar-item>
    </van-tabbar>

</template>

<script>
    export default {
        name: 'tabbar',
        data() {
            return {
                active: 0,
                home_icon: {
                    normal: require('../common/icon/home.png'),
                    active: require('../common/icon/home_ac.png')
                },
                category_icon: {
                    normal: require('../common/icon/category.png'),
                    active: require('../common/icon/category_ac.png')
                },
                message_icon: {
                    normal: require('../common/icon/message.png'),
                    active: require('../common/icon/message.png')
                },
                cart_icon: {
                    normal: require('../common/icon/cart.png'),
                    active: require('../common/icon/cart_ac.png')
                },
                mine_icon: {
                    normal: require('../common/icon/mine.png'),
                    active: require('../common/icon/mine_ac.png')
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    .active_tab img {
        width: 26px;
        height: 26px;
    }

    .active_tab .router-link-active {
        color: #e10f02;
    }
</style>