更新记录

1.0.0（2023-03-05）

自定义底部tabbar，点击中间不渲染页面，直接操作业务逻辑(如扫码，跳转第三方链接或小程序等场景)

平台兼容性

在 pages.json 文件中配置

"tabBar": {
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "color": "#000000",
    "selectedColor": "#596bcf",
    "list": [{
            "pagePath": "pages/home/index"
        },
        {
            "pagePath": "pages/shop/index"
        },
        {
            "pagePath": "pages/scan/index"
        },
        {
            "pagePath": "pages/wallet/index"
        },
        {
            "pagePath": "pages/my/index"
        }
    ]
}

在 App.vue 中隐藏原生的 tabbar

onLaunch: function() {
    uni.hideTabBar()
},
onShow: function() {
    uni.hideTabBar()
},
onHide: function() {
    uni.hideTabBar()
},

基于模板(这个看自己情况，亦可直接使用(需要处理底部的安全距离))

• https://ext.dcloud.net.cn/plugin?id=11110

<template>
    <base-page>
        <template #header>
            内容部分
        </template>
        <template #content>
            内容部分
        </template>
        <template #footer>
            <!--自定义底部的组件在此使用-->
            <ayiTabbar :selected="4"></ayiTabbar>
        </template>
    </base-page>
</template>

其中selected是tabbar的下标从0开始