uni-app 自定义组件ADTabBar 底部导航栏 支持中间

介绍

uni-app自带的底部导航栏虽然也很好用，但是遇到中间需要有一个自定义按钮的需求的时候如果使用自带的midButton，就只支持App，小程序什么都不支持。

ADTabbar自定义底部导航栏支持App、小程序的中间自定义按钮，可以自己设置css让他凸起。

注：配合该组件的根页面（也就是每个底部菜单对应的第一个页面），需要用到自定义组件模式，详细用法可以看Demo工程

暂不支持nvue

还有不足的地方会及时优化，也欢迎提出建议！
Demo工程

使用方式

1、通过插件市场直接下载到components使用

• 在 script 中引用组件

import adTabbar from '@/components/andy-ADTabbar/andy-ADTabbar.vue';
import adTabbarItem from '@/components/andy-ADTabbar/andy-ADTabbarItem.vue';
export default {
    components: {adTabbar,adTabbarItem}
}

2、通过Github下载使用

• script中引用同上

3、通过npm安装

• 在uni-app项目根目录执行命令初始化npm工程：npm init -y
• 通过npm安装包： npm i adtabbar
• 然后在工程中就会出现一个node_module文件夹，这个里面就是ADTabbar的包
• 在 script 中引用组件

import adTabbar from '@/node_modules/adTabbar/ADTabbar.vue';
import adTabbarItem from '@/node_modules/adTabbar/ADTabbarItem.vue';
export default {
    components: {adTabbar,adTabbarItem}
}

在 template 中使用组件

<adTabbar>
    <adTabbarItem text="首页" dataCur="page1" class="maxWidth" @click="navClick" :textColor="curPage=='page1'? '#DF421D':'#9B9B9B'" :icon="'../../static/home' + [curPage=='page1'?'-hover':''] + '.png'"></adTabbarItem>
    <adTabbarItem text="订单" dataCur="page2" class="maxWidth" @click="navClick" :textColor="curPage=='page2'? '#DF421D':'#9B9B9B'" :icon="'../../static/order' + [curPage=='page2'?'-hover':''] + '.png'"></adTabbarItem>
    <!--自定义中间View，可以注释掉就是正常4个Tab菜单-->
    <view class="middleItem" @click="middleClick">
        <view class="buttonView">+</view>
        <text>自定义</text>
    </view>
    <adTabbarItem text="图表" dataCur="page3" class="maxWidth" @click="navClick" :textColor="curPage=='page3'? '#DF421D':'#9B9B9B'" :icon="'../../static/chart' + [curPage=='page3'?'-hover':''] + '.png'"></adTabbarItem>
    <adTabbarItem text="我的" dataCur="page4" class="maxWidth" @click="navClick" :textColor="curPage=='page4'? '#DF421D':'#9B9B9B'" :icon="'../../static/my' + [curPage=='page4'?'-hover':''] + '.png'"></adTabbarItem>
</adTabbar>

adTabbar属性说明

adTabbarItem属性说明

事件说明