更新记录

1.0.5（2023-06-12）

增加预览二维码

1.0.4（2023-04-14）

增加示例

平台兼容性

liu-pageTab-bar适用于uni-app项目的页面tabBar自定义组件

本组件目前兼容微信小程序、H5

本组件支持小程序tabBar自定义，脱离小程序限制（tabbar 2 - 5个,个性图标展示等）

--- 扫码预览、关注我们 ---

扫码关注公众号，查看更多插件信息，预览插件效果！

使用示例

<template>
    <view class="page-main">
        <liu-pageTab-bar :tabList="tabList" :activeColor="'#3A76EE'" @change="change"></liu-pageTab-bar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tabList: [{
                    id: 1,
                    name: '首页',
                    icon: '/static/tabBar/1.png',
                    activeIcon: '/static/tabBar/11.png'
                }, {
                    id: 2,
                    name: '某莫某某',
                    icon: '/static/tabBar/5.png',
                    activeIcon: '/static/tabBar/55.png',
                    bigType: true //是否凸起显示
                }, {
                    id: 3,
                    name: '我的',
                    icon: '/static/tabBar/4.png',
                    activeIcon: '/static/tabBar/44.png'
                }],
            }
        },
        methods: {
            //切换tabbar
            change(e) {
                console.log('当前点击的tabbar信息:', e)
            }
        }
    }
</script>

<style lang="scss">
    page {
        background-color: #f0f0f0;
    }
</style>

属性说明