更新记录

1.0.1（2020-10-19） 下载此版本

可直接导入自己项目

1.0.0（2020-10-17） 下载此版本

自定义tabbar、可带小红点数字标记

平台兼容性

自定义tabbar、可带小红点数字标记

示例代码

<template>
    <view class="container">
        <view class="footer-box">
            <luo-tabbar dotType="success" dotFontColor="#ffffff" :tabList="list" @changeTab="changeTab"></luo-tabbar>
        </view>
    </view>
</template>
<script>
    import luoTabbar from "@/components/luo-tabbar/luo-tabbar.vue"
    export default {
        data() {
            return {
                list:[
                    {
                        img: require('../../components/luo-tabbar/img/1.png'),
                        checkedImg: require('../../components/luo-tabbar/img/5.png'),
                        title: '首页'
                    },
                    {
                        img: require('../../components/luo-tabbar/img/2.png'),
                        checkedImg: require('../../components/luo-tabbar/img/6.png'),
                        title: '分类'
                    },
                    {
                        img: require('../../components/luo-tabbar/img/3.png'),
                        checkedImg: require('../../components/luo-tabbar/img/7.png'),
                        // isDot: true, //开启指示点
                        // val: 10,
                        title: '购物车'
                    },
                    {
                        img: require('../../components/luo-tabbar/img/4.png'),
                        checkedImg: require('../../components/luo-tabbar/img/8.png'),
                        title: '我的'
                    }
                ]
            }
        },
        components:{
            luoTabbar
        },
        onLoad() {

        },
        methods: {
            changeTab(index){
                console.log(index)
            }
        }
    }
</script>

注意事项

需要开启指示点数据需要如下代码数据

    {
        img: require('./img/3.png'),
        checkedImg: require('./img/7.png'),
        isDot: true,
        val: 10, //指示点值
        title: '购物车'
    }

使用说明

事件