uni自定義tabbar

在項目中會有2個tabbar 

一個在主頁，一個在副頁，但是uni的tabbar只能有一個，所以就基於colorUI的代碼自定義一個tabbar

首先解決tabbar的樣式衝突問題

上面的是 colorUI的原生樣式

引入後出現了 樣式衝突。

uni有一個樣式是

uni-view {
    line-height: 1.8;
}

只需要重新定義 行高，改爲1 就可以了

然後是 頁面

頁面將製作的頁面分開寫成 自定義模板 （點擊查看自定義模板怎麼製作）

但是要將頁面寫到

<scroll-view scroll-y class="page"></scroll-view>

中

給page加個樣式

.page {
	height: 100vh;
}

最後在尾部加一個 支持頁面 不被底部tabbar擋住的view

<view class="cu-tabbar-height"></view>

最後在 main中掛載 所寫的頁面

import homePage from './pages/myShop/shopIndex/homePage.vue'
Vue.component('homePage',homePage)

注意：不能再pages.json中註冊頁面

然後可以直接在頁面中引入使用了

<template>
	<view>
		<!-- 自適應狀態欄 -->
		<view class="status-height"></view>
		
		<homePage v-if="PageCur=='homePage'"></homePage>
		
		<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="homePage">
				<view class='cuIcon-cu-image'>
					<image :src="'../../../static/tabbar/basics' + [PageCur=='homePage'?'_cur':''] + '.png'"></image>
				</view>
				<view :class="PageCur=='homePage'?'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>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				PageCur: 'homePage' 
			}
		},
		methods: {
			NavChange: function(e) {
				this.PageCur = e.currentTarget.dataset.cur
			}
		}
	}
</script>

<style>
uni-view {
    line-height: 1;
}
</style>

也可以自己在colorUI中看源碼