uniapp自定义导航栏样式，自定义导航栏组件使用说明，兼容小程序和H5及各端

灰太狼 2023-01-02 03:29 470阅读 0赞

### 实现思路： ###

把底部导航做成一个组件，点击导航显示的页面也做成组件，在启动页面引入这四个组件，点击封装的导航组件就显示相应的组件页面，这样就不会出现页面重新加载的问题了，有个弊端就是导航页面不能使用页面的生命周期，需要使用组件的生命周期，例如onLoad 和onShow 就是页面生命周期，可以使用 created 代替，下面看看实现步骤。

### 实现步骤： ###

**1. 使用 colorui UI库**

下载colorui  ui库-\[github\](https://github.com/weilanwl/ColorUI)；

下载好之后放在 components 目录

**2.在 components 目录创建 tabbar.vue 文件，里面代码是：**

<template>
    	<view class="cu-bar tabbar bg-white shadow foot">
    		<view class="action" @click="NavChange" data-cur="home">
    			<view class='cuIcon-cu-image'>
    				<image :src="'/static/tabbar/home' + [PageCur=='home'?'1':''] + '.png'"></image>
    			</view>
    			<view :class="PageCur=='home'?'text-green':'text-gray'">首页</view>
    		</view>
    		<view class="action" @click="NavChange" data-cur="nutrition">
    			<view class='cuIcon-cu-image'>
    				<image :src="'/static/tabbar/task' + [PageCur == 'nutrition'?'1':''] + '.png'"></image>
    			</view>
    			<view :class="PageCur=='nutrition'?'text-green':'text-gray'">充电</view>
    		</view>
    		<view class="action" @click="NavChange" data-cur="userCenter">
    			<view class='cuIcon-cu-image'>
    				<image :src="'/static/tabbar/user' + [PageCur == 'userCenter'?'1':''] + '.png'"></image>
    			</view>
    			<view :class="PageCur=='userCenter'?'text-green':'text-gray'">我的</view>
    		</view>
    	</view>
    
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				PageCur: 'home'
    			}
    		},
    		methods: {
    			NavChange: function(e) {
    				this.PageCur = e.currentTarget.dataset.cur
    				this.$emit('tabbarChange',this.PageCur)
    			}
    		}
    	}
    </script>
    
    <style>
    </style>

**3.使用示例：**

<template>
    	<view class="">
    		<view v-if="tab=='home'" class="">
    			首页
    		</view>
    		<Nutrition v-if="tab=='nutrition'"></Nutrition>
    		<UserCenter v-if="tab=='userCenter'"></UserCenter>
    		<tabbar @tabbarChange="tabbarChange"/>
    	</view>
    </template>
    
    <script>
    	import tabbar from '@/components/tabbar.vue';
    	import 	Nutrition from '../nutrition/nutrition'
    	import 	UserCenter from '../nhs/userCenter'
    	export default {
    		components: {
    			tabbar,Nutrition,UserCenter
    		},
    		data() {
    			return {
    				tab:'home'
    			}
    		},
    		onLoad() {},
    		methods: {
    			tabbarChange(e){
    				console.log('e',e)
    				this.tab =e
    			},
    			navTo(e) {
    				console.log('e', e)
    				let url = e.currentTarget.dataset.url
    				this.$navTo.navigateTo({
    					url
    				})
    			},
    		}
    	}
    </script>
    
    <style>
    	.aaa {
    		height: 120rpx;
    		line-height: 120rpx;
    		margin: 20rpx;
    		background-color: #00C7DD;
    		text-align: center;
    		color: white;
    		width: 26%;
    	}
    
    	.aaaacc {
    		margin-top: 10rpx;
    		display: flex;
    		flex-wrap: wrap;
    		margin-left: 5%;
    	}
    </style>

**图标：**

![20210104185631256.png][]![20210104185633445.png][]![20210104185636198.png][]![20210104185638933.png][]![20210104185641317.png][]![20210104185643202.png][]

[20210104185631256.png]: https://img-blog.csdnimg.cn/20210104185631256.png
[20210104185633445.png]: https://img-blog.csdnimg.cn/20210104185633445.png
[20210104185636198.png]: https://img-blog.csdnimg.cn/20210104185636198.png
[20210104185638933.png]: https://img-blog.csdnimg.cn/20210104185638933.png
[20210104185641317.png]: https://img-blog.csdnimg.cn/20210104185641317.png
[20210104185643202.png]: /images/20221120/1f5f064111bf4c07af821ab081ee55ae.png