uni自定义tabbar

矫情吗；* 2023-05-29 13:01 2阅读 0赞

在项目中会有2个tabbar

一个在主页，一个在副页，但是uni的tabbar只能有一个，所以就基于colorUI的代码自定义一个tabbar

首先解决tabbar的样式冲突问题

![20191106103057522.png][]

上面的是 colorUI的原生样式

引入后出现了 样式冲突。

uni有一个样式是

uni-view {
        line-height: 1.8;
    }

只需要重新定义 行高，改为1 就可以了

然后是 页面

页面将制作的页面分开写成 [自定义模板][Link 1] （点击查看自定义模板怎么制作）

但是要将页面写到

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

中

给page加个样式

.page {
    	height: 100vh;
    }

最后在尾部加一个 支持页面 不被底部tabbar挡住的view

![20191106103652179.png][]

最后在 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中看源码

[20191106103057522.png]: https://img-blog.csdnimg.cn/20191106103057522.png
[Link 1]: https://blog.csdn.net/qq_38026437/article/details/102742226
[20191106103652179.png]: https://img-blog.csdnimg.cn/20191106103652179.png