介紹

uni-app自帶的底部導航欄雖然也很好用帖池，但是遇到中間需要有一個自定義按鈕的需求的時候如果使用自帶的midButton龙填，就只支持App封断，小程序什么都不支持。

ADTabbar自定義底部導航欄支持App帆焕、小程序的中間自定義按鈕，可以自己設置css讓他凸起不恭。

注：配合該組件的根頁面（也就是每個底部菜單對應的第一個頁面）叶雹，需要用到自定義組件模式，詳細用法可以看Demo工程

暫不支持nvue

還有不足的地方會及時優(yōu)化换吧，也歡迎提出建議折晦！
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項目根目錄執(zhí)行命令初始化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屬性說明

事件說明