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

实现思路:

把底部导航做成一个组件,点击导航显示的页面也做成组件,在启动页面引入这四个组件,点击封装的导航组件就显示相应的组件页面,这样就不会出现页面重新加载的问题了,有个弊端就是导航页面不能使用页面的生命周期,需要使用组件的生命周期,例如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>

图标:

相关推荐
©️2020 CSDN 皮肤主题: 成长之路 设计师:Amelia_0503 返回首页
实付 49.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值