Alipay customizes tabbar and little red dot and solves bugs

Note: Alipay customizes the tabbar. Taking the "My" interface as an example, I have 5 tabbars, so the "My" interface is the fourth. Replace the number 4 with your corresponding tabbar serial number. When running for the first time, the little red dot allRedDot will make an error . It is recommended to comment all the places related to allRedDot first, and introduce the little red dot according to your own project needs.

html

Introduce a custom tabbar in the required page. (The tabbar in pages.json does not need to be configured. If there is an error, add "custom": true, or add "customize": true, depending on the requirements.)

<template>
    <view>
	<tab-bar :allRedDot="allRedDot" :selected="4"></tab-bar>	
   </view>
</template>

JavaScript

Configure and introduce a custom tabbar in the required page.

<script>
import tabBar from "@/common/tabbar.vue"

export default {
      
      
	components: {
      
      
		tabBar
	},
onShow() {
      
      
	if (typeof this.getTabBar === "function" && this.getTabBar()) {
      
      
		this.getTabBar().setData({
      
      
			selected: 4 // 这里是tabbar下标，每个tabbar页面都需要写一下。
		});
	}
	
	my.hideTabBar({
      
      
		animation: true,
		success: (res) => console.log('hideTabBar success'),
		fail: (res) => my.alert({
      
      
			title: 'hideTabBar failed',
			content: JSON.stringify(res)
		}),
	});
 }
}
</script>

tabbar.js file

Directory Structure

<template>
	<view>
	
		<view class="wrap">
			<view class="lawyer" @click="goLawyer">
				<image class="img" :src="img" mode="scaleToFill"></image>
				<text class="txt">律师库</text>
		</view>

		<view class="tab-bar">
			<image :src="tabbar" mode="scaleToFill" class="tab-img2"></image>
				<view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
					<image class="tab_img" mode="scaleToFill" :src="selected == index ? item.activeIcon : item.icon"></image>
					<view class="tab_text" :style="{color: selected == index ? selectedColor : color}">{
   
   {item.text}}
					</view>
				</view>
			</view>
		</view>

		<view v-if="allRedDot!=0" class="reddot"></view>
		<view v-else class=""></view>
	</view>
</template>

<script>
	export default {
		props: {
			selected: { // 当前选中的tab index
				type: Number,
				default: 0
			},
			// 小红点
			allRedDot: {
				type: Number,
				defaul: {},
			},
		},
		data() {
			return {
				// allRedDot: '', //"我的"界面红点
				img:require("../static/img/lawyer.png"),
				tabbar:require("../static/img/tabbar.png"), 
				color: "#999999",
				selectedColor: "#2a3753",
				list: [{
						pagePath: "/pages/index/index",
						icon:require("../static/img/4.2.png"),
						activeIcon: require("../static/img/4.1.png"),
						text: "首页"
					},
					{
						pagePath: "/pages/Message/Message",
						// pagePath: "/pages/LawLibrary/LawLibrary",
						icon: require("../static/img/1.2.png"),
						activeIcon: require("../static/img/1.3.png"),
						text: "首页"
					},
					{
						// pagePath: "/pages/LawLibrary/LawLibrary",
						// iconPath: "../static/img/6.7.png",
						// selectedIconPath: "../static/img/6.6.png",     
						text: "" 
					},
					{
						pagePath: "/pages/community/community",
						icon: require("../static/img/6.7.png"),
						activeIcon: require("../static/img/6.6.png"),
						text: "首页"
					},
					{
						pagePath: "/pages/me/me",
						icon: require("../static/img/3.2.png"),
						activeIcon: require("../static/img/3.1.png"),
						text: "我的"
					}
				]
			}
		}, 
		methods: {
			goLawyer() {
				uni.switchTab({
					url: '/pages/LawLibrary/LawLibrary'
				})
			},
			switchTab(item, index) { 

				let url = item.pagePath;
				uni.switchTab({
					url
				}) 

			}
		}
	
	}
</script>

<style lang="scss">
	.reddot {
		width: 20rpx;
		height: 20rpx;
		border-radius: 50%;
		background: #ff0000;
		position: fixed;
		bottom: 70rpx;
		right: 40rpx;
	}

	.wrap {
		width: 100%;
		position: fixed;
		bottom: 0;
		left:0;
		padding-bottom: 60rpx;
		padding-left: 43.5%;
		z-index: 1000; 
		
		.imgpic{ 
			width: 200rpx;
			height: 200rpx;
		}

		.lawyer {
			background: #2b3e6a;
			width: 100rpx;
			height: 100rpx;
			text-align: center;
			border-radius: 50%;
			z-index: 1000;

			.img {
				width: 37rpx;
				height: 37rpx;
				margin-top: 15rpx;
				margin-left: 31.5rpx;
				margin-right: 31.5rpx;
			}

			.txt {
				display: block;
				color: #ffffff;
				font-size: 20rpx;
			}
		}

		.tab-bar { 
			width: 100%;
			z-index: -10;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 100rpx;
			background: white;
			display: flex;
			justify-content: center;
			align-items: center;
			padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

			.tab-bar-item {
				flex: 1;
				text-align: center;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.tab_img {
					width: 37rpx;
					height: 41rpx;
				}

				.tab_text {
					font-size: 20rpx;
					margin-top: 9rpx;
				}
			}

			.tab-img2 {
				z-index: -100;
				width: 100%;
				height: 100rpx;
				position: fixed;
				bottom: 0;
				left: 0;
				right: 0; 
			}
		}

	}
</style>

renderings

Custom tabbar, rendering without red dot

Custom tabbar, rendering with red dot

Precautions – Solve the error reporting bug

1. The custom tabbar image is not displayed.
   I have checked all the reasons that I can think of, but it doesn't work. Finally, I accidentally saw the image path introduced by require, and the image can be successfully displayed after importing.
   
   

2. Take the "My" interface as an example, I have 5 tabbars, so the "My" interface is the fourth one. Replace the number 4 with your corresponding tabbar serial number.

3. When running for the first time, the little red dot allRedDot will make an error. It is recommended to comment all the places related to allRedDot first, and introduce the little red dot according to your own project needs.