uniapp develops WeChat applet custom tabbar

Step 1: Define your own tabbar path in pages.json. When defining, you only need to write the page path.

 Step 2: Customize the tabbar page. In order to achieve the dynamic effect of the click action, you need to use watch to listen for changes in the value passed by the parent component.

 All codes of custom tabbar page

<template>
	<view class="tab_bar">
		<view class="tabbarBox">
			<view class="handleBox" v-for="(item,index) in tabBarList" :key="index">
				<view class="menuBox" @click="goPages(item.pageIndex.index)">
					<view class="menuIcon">
						<image v-if="item.pageIndex.index!=selectIndex" class="img"                 :src="item.iconPath"></image>
						<image v-else class="img" :src="item.selectIconPath"></image>
					</view>
					<view class="menuName">
						<text :class="item.pageIndex.index==selectIndex?'TextColor':'Text'" >{
   
   {item.tabbarName}}</text>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
export default {
	props: {
		page: {
			type: String,
			default: "homeIndex"
		}
	},
	watch: {
		page: {
			handler(value) {
				this.selectIndex = value;
			},
			immediate: true,
			deep: true
		}
	},
	data() {
		return {
			selectIndex: "",
			tabBarList: "",
		}
		
	},
	//uniapp子组件不支持应用生命周期，所以只能用vue生命周期
	created() {

        //tabbar数据，这儿也支持后台定义通过接口获取数据
        this.tabBarList = [{
    			"tabbarName":"", //tababr名称
				"iconPath":"", //tabbar icon
				"selectIconPath":"", //tabbar 选择icon
				"pageIndex":"" //页面路径
            }]
		
	},methods: {
	
		
		//进入tabble页
		goPages(pageIndex) {
			uni.switchTab({
				url:pageIndex
			})
		},
		
	},
}
</script>
<style lang="scss">
.tab_bar {
	width: 100vw;
	height: 120rpx;
	position: fixed;
	bottom: 30rpx;
	/* 模糊大小就是靠的blur这个函数中的数值大小 */
	backdrop-filter: blur(10px);
	border-radius: 60rpx;
		
.tabbarBox {
	display: flex;
	margin-top: 10rpx;
	justify-content: space-evenly;
	
	
.handleBox {
	width: 20vw;
	height: 110rpx;
	

.menuBox {
	padding: 0rpx 20rpx;
	width: 120rpx;
	height: 98%;
	text-align: center;

.img {
	width: 50rpx;
	height: 50rpx;
	}
}
	}
}
	}

.Text {
	font-size: 24rpx;
	font-family: Cochin, serif;
	font-weight: 900;
}

.TextColor {
	@extend .Text;
	color: #d81e06;
}

</style>

Note: This page can be placed directly as a component, because uniapp supports easycom mode, which is relatively simple and does not require global registration.

 Step 3: Hide the native tabbar and write uni.hideTabbar() onshow in the App.vue file; you can also close the default tabbar directly in pages.json through the custom configuration item in the tabbar.

method one:

Method two:

Step 4: Introduce the table page. If the easycom rule component is used, it can be used directly on the page.

 Here, the parent component page needs to dynamically pass the value, in order to tell the component the current stay page, and to provide basic conditions for the dynamic display of the component.

Note: This value must be passed dynamically, so it must be placed in onshow, and the value will change when the page switches.

 When all pages have introduced components, you can see the effect.

Rendering:

The matte background used for the tabbar looks pretty good.