
<template>
    <div>
        <h-tabbar v-model="active" @change="onChange" background="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1563010334123&di=48c9761a95cf8cea938d19f449f5f48c&imgtype=0&src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F190711%2F1-1ZG11F010.jpg">
        <h-tabbar-item v-for="(item,index) in icon" :key="index" :info="index === 1 && active !== 1 ? 'new' : ''">
            <span>{{ item.label }}</span>
            <img
                slot="icon"
                slot-scope="props"
                :src="props.active ? item.active : item.default"
            >
        </h-tabbar-item>
    </h-tabbar>
    <!-- <h-tabbar v-model="active" @change="onChange">
        <h-tabbar-item icon="shouye">首页</h-tabbar-item>
        <h-tabbar-item icon="dianzanshu" dot>生鲜馆</h-tabbar-item>
        <h-tabbar-item icon="gouwuche" info="5">购物车</h-tabbar-item>
        <h-tabbar-item icon="wode" info="20">我的</h-tabbar-item>
    </h-tabbar> -->
    </div>
</template>

<script>
import { hTabbar, hTabbarItem } from './index.js';
export default {
    name: "swipe-demo",
    components: {
        hTabbar,
        hTabbarItem
    },
    data() {
        return {
            active: 0,
            icon: [
                {
                    default: 'http://apimagev.frxs.cn/systemFootNavImg/20190228/100percent_16e252b1-361a-45ce-bcb8-f4e96942dd791551323057207.png',
                    active: 'http://apimagev.frxs.cn/systemFootNavImg/20190228/100percent_6573eadf-dfc4-4a65-a631-ca46212154321551323062264.png',
                    label: '首页'
                },
                {
                    default: 'http://apimagev.frxs.cn/systemFootNavImg/20190609/100percent_a78214c0-2af9-4df1-9c34-8cbc7fdc50cd1560067597121.gif',
                    active: 'http://apimagev.frxs.cn/systemFootNavImg/20190609/100percent_013ea85a-5560-4ea3-b7ec-b0d54b36e1581560067602221.png',
                    label: '生鲜馆'
                },
                {
                    default: 'http://apimagev.frxs.cn/systemFootNavImg/20190228/100percent_9309f8a3-b399-405a-866c-7c36c1d550271551323120309.png',
                    active: 'http://apimagev.frxs.cn/systemFootNavImg/20190228/100percent_40adb2bc-f5b2-4931-98b4-3c5da43bf29c1551323123585.png',
                    label: '购物车'
                },
                {
                    default: 'http://apimagev.frxs.cn/systemFootNavImg/20190228/100percent_5f01cdba-c375-4003-9dae-dd86df2a1c551551323129106.png',
                    active: 'http://apimagev.frxs.cn/systemFootNavImg/20190228/100percent_ff884c49-fd39-4a89-9aeb-c3105e4f73751551323131813.png',
                    label: '我的'
                }
            ]
        }
    },
    methods: {
        onChange( a ) {
            console.log('a', a);
        }
    }
}
</script>
<style>
</style>