tk-mini-program/components/tabBar/tabBar.vue

<template>
	<view class="tab-block">

		<ul class="tab-list flex flex-center"
			:class="showMiddleButton === true ? 'tab-list-middle' : 'tab-list-default'">
			<li v-for="(item, index) in tabList" :class="'list-item flex flex-column flex-middle ' + item.middleClass"
				@click="handlePush(item, index)" :key="index">
				<view class="item-img-box">
					<image class="item-img" :src="tabIndex == index ? item.selectedIconPath : item.iconPath" />
				</view>
				<view class="item-text font-20" :style="{ color: tabIndex == index ? '#1DD2F9' : '#A7A3A3' }">{{
					item.text }}</view>
			</li>
		</ul>
		<!-- <view class="tab-bar" v-show="showTabBar === true"></view> -->
		<view @touchmove.stop.prevent="disabledScroll">
			<!-- <uni-popup ref="addSuccess" type="bottom">
				<imgSuccess @closeSuccess="closeSuccess"></imgSuccess>
			</uni-popup> -->
		</view>
		<moduleSelect ref="createModule"></moduleSelect>
	</view>

</template>

<script setup>
	import moduleSelect from './moduleSelect.vue'
	import {
		getCurrentInstance,
		defineProps,
		onMounted,
		reactive,
		ref
	} from 'vue';
	//定义弹窗组件
	// const addSuccess = ref(null);

	// let showTabBar = ref(false);
	let showMiddleButton = ref(false);

	const props = defineProps({
		tabIndex: Number
	})
	let tabList = reactive([{
			iconPath: '/static/mh/img/tabbar1.png',
			selectedIconPath: '/static/mh/img/tabbarSetl1.png',
			text: '探索',
			pagePath: '/pages/index/index',
			middleClass: ''
		},
		{
			iconPath: '/static/mh/img/tabbar3.png',
			selectedIconPath: '/static/mh/img/tabbarSetl3.png',
			// text: '消息',
			text: 'AI绘图',
			pagePath: '/pages/messages/messages',
			middleClass: ''
		},
		{
			iconPath: '/static/mh/img/add.png',
			selectedIconPath: '/static/mh/img/add.png',
			text: '',
			pagePath: '/pages/c/c',
			middleClass: ''
		},
		{
			iconPath: '/static/mh/img/tabbar2.png',
			selectedIconPath: '/static/mh/img/tabbarSetl2.png',
			text: '换背景',
			// text: '社区',
			pagePath: '/pages/like/like'
		},
		{
			iconPath: '/static/mh/img/tabbar4.png',
			selectedIconPath: '/static/mh/img/tabbarSetl4.png',
			text: '我的',
			pagePath: '/pages/my/my',
			middleClass: ''
		}
	]);
	onMounted(() => {
		setTabBar();
		// getSystemInfo()
	});
	
	uni.getSystemInfo({
	   success: function (res) {
	      // iPhone机型有横杆的导航栏高度大于40
		  console.log('机型',res.deviceType);
	      if (res.safeArea.top > 40) {
	         console.log('苹果的底部栏大小',res.safeArea.top);
	      }
	   }
	});

	
	
	//判断中间按钮是否突出显示
	function setTabBar() {
		let tabLength = tabList.length;
		if (tabLength % 2) {
			showMiddleButton.value = true;
			let middleIndex = Math.floor(tabLength / 2);
			tabList[middleIndex].middleClass = 'mid-button';
		}
	}
	//点击按钮
	function handlePush(item, index) {
		if (index === 2) {
			//打开弹窗
			// addSuccess.value.open();
			openPopupQuantity()
			return;
		} else if (index === 1) {
			uni.navigateTo({
				url: "/pages/create/wenshengPicture/wenshengPicture"
			})
		} else if (index === 3) {
			uni.navigateTo({
				url: "/pages/create/backgroundPicture/backgroundPicture"
			})
		} else {
			uni.switchTab({
				url: item.pagePath
			});
		}

	}
	const createModule = ref()

	function openPopupQuantity() {
		createModule.value.open()
	}
	//组件返回关闭指令
	function closeSuccess() {
		// addSuccess.value.close();
	}
	//解决弹出层后页面还可以滚动
	const disabledScroll = () => {
		return false
	}

	//兼容iPhoneX以上底部黑线条的显示
	// function getSystemInfo() {
	// 	uni.getSystemInfo({
	// 		success: res => {
	// 			// X及以上的异形屏top为44，非异形屏为20
	// 			if (res.safeArea.top > 20) {
	// 				showTabBar.value = true;
	// 			}
	// 		}
	// 	});
	// }
</script>

<style lang="scss" scoped>
	.flex {
		display: flex;
		flex-flow: row wrap;
	}

	.flex-center {
		align-items: center;
		justify-content: center;
	}

	.flex-column {
		flex-direction: column;
		align-items: center;
	}

	.flex-middle {
		align-items: center;
	}

	.font-20 {
		font-size: 20rpx;
	}

	.tab-block {
		position: relative;
		position: fixed;
		bottom: 0;
		// left: 0;
		z-index: 999;
		background-size: contain;
		width: 100vw;
		background-color: #111111;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		.tab-list {
			height: 100rpx;
			padding: 0; //解决偏移
			z-index: 0;
		}

		.tab-list-default {
			background-color: #ffffff;
			border-top: 1px #dddddd solid;
		}

		.tab-list-middle {
			position: relative;

			// background: url('https://res.paquapp.com/popmartvip/home/nav_bar_bg_2x.png') no-repeat center center;
			background-size: cover;
		}

		.list-item {
			flex: 1;

			.item-img-box {
				width: 38rpx;
				height: 38rpx;
				margin-bottom: 9rpx;
				position: relative;
			}

			.item-img {
				// width: 44rpx;
				// height: 42rpx;
				width: 38rpx;
				height: 38rpx;
				color: red;
			}
		}

		.mid-button {
			position: relative;

			.item-img-box {
				width: 150rpx;
				height: 148rpx;
				margin-bottom: 9rpx;
				position: absolute;
				z-index: 10;
				top: -104rpx;
			}

			.item-img {
				width: 150rpx;
				height: 116rpx;
			}

			.item-text {
				font-size: 20rpx;
				position: absolute;
				z-index: 1002;
				bottom: -40rpx;
				color: #393a41;
			}
		}

		.tab-bar {
			height: 30rpx;
			background-color: #ffffff;
		}
	}
</style>