轻量级小程序自定义tabbar组件封装的实现与使用-EW帮帮网

一、前言。

众所周知，原生tabBar是相对固定的配置方式，样式布局单一，无法满足日益丰富的tabbar效果。所以，掌握自定义tabbar的组件封装就变得重中之重。本文就基于uni-app来简述如何封装和使用轻量级的小程序自定义tabbar组件。

二、工具准备。

因为是基于uni-app开发的小程序，所以在准备封装自定义tarbar组件前，我们需要准备以下工具和素材。

HBuilderX
微信开发者功能
tarbar的基础配置
自定义tabbar的基础组件

三、开发流程。

pages.json文件tabbar的配置。

虽然是自定义tabbar，但是也需在pages.json中定义tabbar的配置，这里配置上我们需要的tabbar项即可。

cc-myTabbar基础tarbar组件的导入。

将 ext.dcloud.net.cn/plugin?id=1… 中的基础tabbar插件下载并导入至我们项目中即可。

对自定义组件cc-myTabbar的改造，按需改造成我们想要的tabbar布局和样式。

ui效果图：

代码改造（.vue）：

<template>
	<view class="tabbar_box">
		<view class="tabbar_list">
			<view class="tabbar_list_item" @tap.stop="onTabBar(0)">
				<image mode="scaleToFill"
					:src="tabBarShow == 0 ? '/static/images/tabbar_home_blue.png' : '/static/images/tabbar_home_gray.png'">
				</image>
				<text :class="tabBarShow == 0 ? 'tabbar_list_item_blue' : 'tabbar_list_item_gray'">首页</text>
			</view>
			<view class="tabbar_list_opera" @tap.stop="initiateScan">
				<image src="/static/images/tabbar_sys_blue.png" mode="scaleToFill"></image>
			</view>
			<view class="tabbar_list_item" @tap.stop="onTabBar(1)">
				<image mode="scaleToFill"
					:src="tabBarShow == 1 ? '/static/images/tabbar_my_blue.png' : '/static/images/tabbar_my_gray.png'">
				</image>
				<text :class="tabBarShow == 1 ? 'tabbar_list_item_blue' : 'tabbar_list_item_gray'">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		props: {
			tabBarShow: {
				type: Number,
				default: 0,
			}
		},
		mounted() {

		},
		methods: {
			//点击tabbar
			onTabBar(index) {
				switch (index) {
					case 0:
						uni.switchTab({
							url: '/pages/home/index'
						})
						break;
					case 1:
						uni.switchTab({
							url: '/pages/personal/index'
						})
						break;
				}
			},
			//扫一扫
			initiateScan(){
				this.$emit('tabBarScan')
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'cc-myTabbar.scss';
</style>

代码改造（.scss）：

.tabbar_box{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 140rpx;
	z-index: 9999;
	background: #FFFFFF;
	box-shadow: 0rpx 6rpx 24rpx 0rpx rgba(192,200,220,0.5);
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border: 2rpx solid;
	border-image: linear-gradient(360deg, rgba(241.26902639865875, 243.61616045236588, 248.31042855978012, 1), rgba(255, 255, 255, 1)) 2 2;
	.tabbar_list{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
		.tabbar_list_item{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 33%;
			image{
				width: 50rpx;
				height: 50rpx;								
			}
			.tabbar_list_item_blue{
				font-weight: 500;
				font-size: 30rpx;
				color: #3CC0FF;
				padding-top: 6rpx;
			}
			.tabbar_list_item_gray{
				font-weight: 500;
				font-size: 30rpx;
				color: rgba(0, 0, 0, .3);
				padding-top: 6rpx;
			}
		}
		.tabbar_list_opera{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 33%;
			image{
				width: 120rpx;
				height: 120rpx;
			}
		}
	}
}