最近在学习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>