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

admin管理员组

文章数量:1666726

实现思路：

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

实现步骤：

1. 使用 colorui UI库

下载colorui  ui库-[github](https://github/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>

图标：

本文标签： 自定义使用说明样式组件程序