uniapp微信小程序如何自定义底部tabbar导航

微信小程序默认的tabbar不是很好看，我们可以自自定义底部导航，自定义样式，以下是个uniapp案例demo，供大家参考和使用：

一、创建components组件

tabbar.vue

二、编写底部导航

<template>
	<!-- 底部导航 -->
	<view class="tabbar" :style="{'padding-bottom': paddingBottomHeight + 'rpx'}">
		<view class="tabbar-item" v-for="(item, index) in list" :key="index" @click="tabbarChange(item.path)">
			<view class="column-me row-center tabbarActive" v-if="current == item.id">
				<view :class="{'cenImgbox' : item.center == 1}">
					<image class="item-img" :src="item.iconPath" :class="{'cenImg cenImg_h' : item.center == 1}"></image>
				</view>
				<view class="text-item-x">{{item.text}}</view>
			</view>
			<view class="column-me row-center" v-else>
				<view :class="{'cenImgbox' : item.center == 1}">
					<image class="item-img1" :src="item.icon" :class="{'cenImg' : item.center == 1}"></image>
				</view>
				<view class="text-item-n">{{item.text}}</view>
			</view>
		</view>
	</view>
</template>

三、js代码：处理和遍历底部导航

<script>
	export default {
		props: {
			current: String
		},
		data() {
			return {
				paddingBottomHeight: 0, //苹果X以上手机底部适配高度
				list:[],
				// list: [{
				// 		text: '首页',
				// 		icon: '../static/home.png', //未选中图标
				// 		iconPath: '../static/home_h.png', //选中图片
				// 		path: "/pages/index/index", //页面路径
				// 	},
				// 	{
				// 		text: '水印',
				// 		icon: '../static/water.png', //未选中图标
				// 		iconPath: '../static/water_h.png', //选中图片
				// 		path: "/pages/water/water", //页面路径
				// 	},
				// 	{
				// 		text: '头像',
				// 		icon: '../static/touxiang.png', //未选中图标
				// 		iconPath: '../static/touxiang_h.png', //选中图片
				// 		path: "/pages/touxiang/touxiang", //页面路径
				// 	},
				// 	{
				// 		text: '消息',
				// 		icon: '../static/box.png', //未选中图标
				// 		iconPath: '../static/box_h.png', //选中图片
				// 		path: "/pages/box/box", //页面路径
				// 	},
				// 	{
				// 		text: '我的',
				// 		icon: '../static/user.png', //未选中图标
				// 		iconPath: '../static/user_h.png', //选中图片
				// 		path: "/pages/user/user", //页面路径
				// 	}
				// ]
			};
		},
		async created() {
			let that = this;
			uni.getSystemInfo({
				success: function(res) {
					let model = ['X', 'XR', 'XS', '11', '12', '13', '14', '15'];
					model.forEach(item => {
						//适配iphoneX以上的底部，给tabbar一定高度的padding-bottom
						if (res.model.indexOf(item) != -1 && res.model.indexOf('iPhone') != -1) {
							that.paddingBottomHeight = 40;
						}
					})
				}
			});
			uni.showLoading({
			 title: '加载中'
			});
			const result = await this.$myRequest({
				url: '/Blog/getTabbar',
			})		
			if(result.data.code==200){
				this.list = result.data.data
				uni.hideLoading()	
				// console.log(result.data.data);
			}
		},
		watch: {

		},
		methods: {
			tabbarChange(path) {
				uni.switchTab({
					url: path
				})
				// console.log(path, 'pathpath')
				// this.$.open_tab(path)
			}
		}
	};
</script>

四、样式代码：

<style scoped>
	.tabbarActive {
		color: #31a3fb !important;
		transform: scale(1.1);
	}

	.tabbar {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		right: 0rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background: rgba(255,255,255,.9) ;
		z-index: 999;
 
		 box-shadow: 15rpx 5rpx 5rpx 1rpx rgba(0, 0, 0, 0.5);
	}

	.tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100rpx;
		width: 100%;
		font-size: 20rpx;
		transition: transform 0.3s;
	}
	.column-me {
		display: flex;
		flex-direction: column;
	}
	.row-center {
		align-items: center;
	}

	.text-item-x {
		color: #215AA0;
	}

	.text-item-n {
		color: #6D7984;
	}

	/* 选中后 */
	.item-img {
		width: 50rpx;
		height: 50rpx;
	}

	/* 选中前 */
	.item-img1 {
		width: 50rpx;
		height: 50rpx;
	}
	/* 中间图片高度 */
	.cenImgbox {
		width: 98rpx !important;
		height: 98rpx !important;
		margin-top: -34rpx;
 
		border-radius: 50%;
		/* background: #000; */
		background: rgba(255,255,255,.9) ;
 
 
	}


	/* 中间图片高度 */
	.cenImg {
		width: 68rpx !important;
		height: 68rpx !important;
		display: block;
		margin: 15rpx auto;
		border-radius: 50%;
		background-color: #aaaaaa;
 
	}
	.cenImg_h{
		background-color: #31a3fb;
	}

</style>

五、使用方法：在每个页面引入如下导航代码

<template>
<!--index.wxml-->
<view class="container">
	 <!-- :current="'0'"	第一个选中 -->
	 <Tabbar :current="'1'"></Tabbar>
</view>
</template>

5.1、在onShow方法里面加入隐藏默认导航

onShow(){
	uni.hideTabBar({
		animation:false
	})
}

5.2、在pages.json文件里面开启自定义导航设置

 "tabBar": {
		 "custom": true,
}

6、案例效果：以上就是自定义tabbar导航案例，效果展示可以预览官方小程序