uni-app自定義tabbar底部導航

uni-app中原生tabbar配置和小程序差很少，具體配置查看這篇文章
https://uniapp.dcloud.io/coll...

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/component/index",
        "iconPath": "static/image/icon_component.png",
        "selectedIconPath": "static/image/icon_component_HL.png",
        "text": "組件"
    }, {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}

在pages.json中若是沒有配置tabBar參數，uni-app中就不會顯示底部tabbar，能夠經過自定義組件形式來實現想要的自定義tabbar效果。
以下圖：在H5端、小程序、App端 下顯示的自定義tabbar效果

新建tabbar.vue組件，並在main.js裏面引入全局組件

<block v-for="(item,index) in tabList" :key="index">
    <view class="navigator" :class="currentTabIndex == index ? 'on' : ''" @tap="switchTab(index)">
        <view class="icon">
            <text class="iconfont" :class="item.icon" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]"></text>
            <text v-if="item.badge" class="uni_badge">{{item.badge}}</text>
            <text v-if="item.badgeDot" class="uni_badge uni_badge_dot"></text>
            </view>
        <view class="text" :style="[currentTabIndex == index ? {'color': tintColor} : {'color': color}]">{{item.text}}</view>
    </view>
</block>

<script>
    export default {
        data() {
            return {
                tabList: [
                    {
                        icon: 'icon-emotion',
                        text: 'tab01',
                        badge: 1
                    },
                    {
                        icon: 'icon-qianbao',
                        text: 'tab02',
                    },
                    {
                        icon: 'icon-choose01',
                        text: 'tab03',
                        badgeDot: true
                    }
                ],
                currentTabIndex: this.current
            }
        },
        props: {
            current: { type: [Number, String], default: 0 },
            backgroundColor: { type: String, default: '#fbfbfb' },
            color: { type: String, default: '#999' },
            tintColor: { type: String, default: '#42b983' }
        },
        methods: {
            switchTab(index){
                this.currentTabIndex = index
                this.$emit('click', index)
            }
        },
    }
</script>

import tabBar from './components/tabbar.vue'
Vue.component('tab-bar', tabBar)

在頁面中引入tabbar，並自定義tabbar屬性參數

<tab-bar :current="currentTabIndex" backgroundColor="#fbfbfb" color="#999" tintColor="#42b983" @click="tabClick"></tab-bar>

<tab-bar :current="2" backgroundColor="#1a4065" color="#c3daf1" tintColor="#02f32b" @click="tabClick"></tab-bar>

data() {
    return {
        ...
        currentTabIndex: 1
    }
},
methods: {
    tabClick(index){
        console.log('返回tabBar索引：' + index)
        this.currentTabIndex = index
    },
    ...
},

上圖實例中uni-app自定義頂部導航欄
https://blog.csdn.net/yanxiny...