wapshop/src/components/main/main.vue

<template>
    <div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
        <tabbar>
            <tabbar-item link="/main/index" :selected="routerPath('/main/index')">
                <img slot="icon" src="../../assets/tabbar_home_default@2x.png">
                <img slot="icon-active" src="../../assets/tabbar_home_hight@2x.png">
                <span slot="label">首页</span>
            </tabbar-item>
            <tabbar-item link="/main/discovery" :selected="routerPath('/main/discovery')">
                <img slot="icon" src="../../assets/tabbar_shopguide_default@2x.png" >
                <img slot="icon-active" src="../../assets/tabbar_shopguide_hight@2x.png">
                <span slot="label">发现</span>
            </tabbar-item>
            <tabbar-item link="/main/shopping_cart" :selected="routerPath('/main/shopping_cart')">
                <img slot="icon" src="../../assets/tabbar_shopcar_default@2x.png">
                <img slot="icon-active" src="../../assets/tabbar_shopcar_hight@2x.png">
                <span slot="label">购物车</span>
            </tabbar-item>
            <tabbar-item link="/main/mine" :selected="routerPath('/main/mine')">
                <img slot="icon" src="../../assets/tabbar_set_default@2x.png">
                <img slot="icon-active" src="../../assets/tabbar_set_hight@2x.png">
                <span slot="label">我的</span>
            </tabbar-item>
        </tabbar>
    </div>
</template>
<script>
    import {Tabbar, TabbarItem} from 'vux'
    import WechatShare from '../../wechat/WechatShare'
    import Api from '../../lib/api'

    export default
    {
        created()
        {
        },
        data () {
            return {
                transitionName:''
            }
        },
        components: {
            Tabbar,
            TabbarItem,
        },
        methods: {
            routerPath(path){
                if (this.$route.path.indexOf(path) >= 0) {
                    return true;
                }
                else {
                    return false;
                }
            }
        }
    }
</script>
<style>
    .slide-fade-enter-active {
        -webkit-transform: translateY(0);
        transition: all .4s;
        -webkit-transition: all .4s;
    }

    .slide-fade-enter {
        transform: translateY(-400px);
        -webkit-transform: translateY(-400px);
        opacity: 0;
    }

    .slide-fade-leave-active {
        opacity: 0;
    }

    .weui-tabbar {
        position: fixed;
        background: #fff;
    }
    .weui-tabbar__label {
        color: #000;
    }
    .weui-tabbar__item {
        padding: 8px 0 0;
    }
    .weui-tabbar__icon {
        width: 50px;
        height: 50px;
    }
</style>