uniApp tabbar 可自定义，也可原生

最近在学习uniApp,关于tabbar的学习，记录一下。

1. uniApp原生的 tabbar 设置
   在 pages.json 文件中，注意 static 文件下图片路径

   "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "static/images/tabbar2/basics.png",
            "selectedIconPath": "static/images/tabbar2/basics_cur.png",
            "text": "首页"
        },{
            "pagePath": "pages/fangke/fangke",
            "iconPath": "static/images/tabbar2/plugin.png",
            "selectedIconPath": "static/images/tabbar2/plugin_cur.png",
            "text": "访客"
        }, {
            "pagePath": "pages/my/my",
            "iconPath": "static/images/tabbar2/about.png",
            "selectedIconPath": "static/images/tabbar2/about_cur.png",
            "text": "我的"
        }]
    }

2. 自定义的tabbar，用的colorUI的tabbar组件
   下载源码解压，复制根目录的 /colorui 文件夹到你的根目录
   传送门 colorUI-uniAPP
   传送门 colorUI
   原理是一个主页面引入多个页面，在主页面进行切换显示。这样可以解决切换时闪烁的问题。
   main.js全局引入components

import basics from './pages/basics/home.vue'
Vue.component('basics',basics)

import components from './pages/component/home.vue'
Vue.component('components',components)

import plugin from './pages/plugin/home.vue'
Vue.component('plugin',plugin)

在主页面index.vue文件中，

<basics v-if="PageCur=='basics'"></basics>
<components v-if="PageCur=='component'"></components>
<plugin v-if="PageCur=='plugin'"></plugin>
<view class="cu-bar tabbar bg-white shadow foot">
            <view class="action" @click="NavChange" data-cur="basics">
                <view class='cuIcon-cu-image'>
                    <image :src="'/static/tabbar/basics' + [PageCur=='basics'?'_cur':''] + '.png'"></image>
                </view>
                <view :class="PageCur=='basics'?'text-green':'text-gray'">元素</view>
            </view>
            <view class="action" @click="NavChange" data-cur="component">
                <view class='cuIcon-cu-image'>
                    <image :src="'/static/tabbar/component' + [PageCur == 'component'?'_cur':''] + '.png'"></image>
                </view>
                <view :class="PageCur=='component'?'text-green':'text-gray'">组件</view>
            </view>
            <view class="action" @click="NavChange" data-cur="plugin">
                <view class='cuIcon-cu-image'>
                    <image :src="'/static/tabbar/plugin' + [PageCur == 'plugin'?'_cur':''] + '.png'"></image>
                </view>
                <view :class="PageCur=='plugin'?'text-green':'text-gray'">扩展</view>
            </view>
</view>

在APP.vue记得引入colorUI的css

<style>
  @import "colorui/main.css";
  @import "colorui/icon.css";
</style>