uniApp tabbar 可自定义，也可原生

Posted 2021-09-13 diuren1205

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