dsProject/dsApp/components/tabbar/tabbar.vue

<template>
	<view class="tabbar">
		<view class="tabbar-bg-box">
			<image class="tabbar-bg"
				src="data:image/png;base64,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oO83ioZay+EIECBAgAABAgQIECBAgMBoCZTcN2gKtXR/3rS+U7ikdqr1bad14nqbNm267Pzzz79s0aJFr5k/f/7LquDLyurnwirksrL6Wd5240Gur4I0v6x+flGFauqf7UeOHHlm//79m3/5y18+fumllz7Rce3phkimG5CZaKVtcKZtaGa65xzkuOxNgAABAgQIECBAgAABAgQIzLBAyQ2vGW7R5QkQIECAAAECBAgQIECAAIEZEJjqnkFJ2KVzTdv1ncctfQpNG6ITez7++OOvqZ4M89rqyTCXn3nmmWuqMMxrq59L22w229dW4ZmfVj9PVk+ieWLv3r1//fTTT296/etfv6Wj7+kES6YbnmkKwbQN1XSPYzpnm+2j1R8BAgQIECBAgAABAgQIECAQEBCUCaApIUCAAAECBAgQIECAAAECIyAwnaBMyZNgStbUzH0JytSvSrr44ovXVE+Iuax6Qkz9U4difqPav34d0ij+s68Oz1RPn9l4+PDhn/7617/eWD1F56fXXnvt9pYYgjItwSwnQIAAAQIECBAgQIAAAQIEZlZAUGZm/V2dAAECBAgQIECAAAECBAjMJoFBhmNKnipTW/QlGHPPPfece/31199wzjnnvGnBggX/oHpd0orZBD1be6le4fRMFZy5f8+ePfd/4xvf+O773ve+PS17bROcafs0mbqVzpqm+u7WPV2m5TAtJ0CAAAECBAgQIECAAAECwyggKDOMU3UmAgQIECBAgAABAgQIECDQTqBNOGWqJ8E0hWHaXKc+Qel9izlr1qyZe999972heo3Sm8bGxt40b96811f1c9sxWN0lcGR8fPyhgwcP3r9t27b7L7nkkseOf14aOGkTmqm3bnrN0lQhmaYATefRSvv3C0GAAAECBAgQIECAAAECBAgMoUDpDachPLojESBAgAABAgQIECBAgAABAscF2gRYOtc2vT6p6fOJAbS5/omhffvb3z7/6quvvmHx4sW/U71K6U3VU2POM9HBCVRPm9lRP21m7969G77zne/c/853vrPpaTPTDcrUh+kVgJkqVNMUhGn6fHCIdiZAgAABAgQIECBAgAABAgRmXEBQZsZHoAECBAgQIECAAAECBAgQIDAjAk33BHoFYprCL20/nzh8Uz9nrF279qWnxixfvvx3zjzzzBvmzp27ripurJsR3eG/aPWwmfGHq6fNbNi5c+eGV7/61T8pPHJpeKZNEKbN2u42hWYKB2cZAQIECBAgQIAAAQIECBAYFgE3k4Zlks5BgAABAgQIECBAgAABAgSaBZruA5S+VqntK5ZCT4ypj3PNNdfMv/fee69dunTpO6pwzE3VU2P+VvMxrTjdAtXTZp4+dOjQN7Zv3/6NK6+88uEdO3YcLehh0KGZplc5TbQoLFMwLEsIECBAgAABAgQIECBAgMCwCDTdIBuWczoHAQIECBAgQIAAAQIECBAg0Pz0ldLXKrV9akyroMxNN900/4tf/OL1S5YseUf1SqU6HLPM8PIIVKGZbVVo5pvPP//816+44oq/2rZtW2kgZuKQJQGXklcylexTX1NQJs+vl04JECBAgAABAgQIECBAgMC0BQRlpk1oAwIECBAgQIAAAQIECBAgkEKgNKwyqLDMBFLPexE/+9nPLnvZy172z6snx9xS
				mode="aspectFill">
			</image>
			<view class="mid-icon" @tap="midClick">
				<image
					src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMiIgaGVpZ2h0PSIzMiIgdmlld0JveD0iMCAwIDMyIDMyIj48cGF0aCBkYXRhLW5hbWU9IjEiIGQ9Ik0xMyAyOVYxOUgzYTMgMyAwIDAgMSAwLTZoMTBWM2EzIDMgMCAwIDEgNiAwdjEwaDEwYTMgMyAwIDEgMSAwIDZIMTl2MTBhMyAzIDAgMSAxLTYgMHoiIGZpbGw9IiNmZmYiLz48L3N2Zz4="
					mode="aspectFill"></image>
			</view>
			<view class="tabbar-box">
				<view class="tabbar-item" v-for="v,k in data" :key="k" @tap="tabbarItemClick(v,k)">
					<image class="tabbar-icon" :src="tabbarIndex==k?v.selectedIconPath:v.iconPath" mode="aspectFill">
					</image>
					<view class="tabbar-text" :class="tabbarIndex==k?'tabbar-text-select':''">{{v.text}}</view>
				</view>
			</view>
		</view>
		<!-- IOS安全距离START -->
		<view class="ios-aq"></view>
		<!-- IOS安全距离END -->
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		props:["index"],
		data() {
			return {

				tabbarIndex: 0,
				data: [{
						text: "首页",
						iconPath: "../../static/icon_home.png",
						selectedIconPath: "../../static/icon_home_select.png",
						pagePath: "/pages/index/index"
					},
					{
						text: "动态",
						iconPath: "../../static/icon_find.png",
						selectedIconPath: "../../static/icon_find_select.png",
						pagePath: "/pages/cart/cart"
					},
					{
						text: "",
						iconPath: "",
						selectedIconPath: "",
						pagePath: ""
					},
					{
						text: "消息",
						iconPath: "../../static/icon_msg.png",
						selectedIconPath: "../../static/icon_msg_select.png",
						pagePath: "/pages/category/category"
					},
					{
						text: "我的",
						iconPath: "../../static/icon_me.png",
						selectedIconPath: "../../static/icon_me_select.png",
						pagePath: "/pages/center/center"
					},
				]
			};
		},
		mounted() {
			this.tabbarIndex = this.index			
		},
		methods: {
			tabbarItemClick(v, k) {
				// if(this.tabbarIndex == k){
				// 	return
				// }
				// this.tabbarIndex = k
				uni.switchTab({
					url: v.pagePath
				})
			},
			midClick() {
				console.log("点击了中间");
			},

		}
	}
</script>

<style lang="scss" scoped>
	page,
	block,
	view,
	scroll-view,
	swiper,
	movable-view,
	icon,
	text,
	progress,
	button,
	checkbox,
	form,
	input,
	label,
	picker,
	picker-view,
	radio,
	slider,
	switch,
	textarea,
	navigator,
	audio,
	image,
	video,
	map,
	canvas,
	contact-button,
	cover-image,
	cover-view {
		box-sizing: border-box;
	}

	.tabbar {
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;

		.ios-aq {
			height: env(safe-area-inset-bottom);
			background-color: #FFFFFF;
		}

		.tabbar-bg-box {
			width: 100%;
			height: 118rpx;
			position: relative;

			.tabbar-bg {
				width: 100%;
				height: 100%;
			}

			.mid-icon {
				position: absolute;
				top: 16rpx;
				left: 50%;
				transform: translateX(-50%);
				border-radius: 999px;
				width: 92rpx;
				height: 92rpx;
				background-color: #007AFF;
				padding: 30rpx;
				z-index: 10;

				image {
					width: 100%;
					height: 100%;
				}
			}


			.tabbar-box {
				width: 100%;
				height: 96rpx;
				position: absolute;
				bottom: 0;
				left: 0;
				display: flex;

				.tabbar-item {
					flex: 1;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;

					.tabbar-icon {
						width: 48rpx;
						height: 48rpx;
						padding: 2px;
						/*  */
					}

					.tabbar-text {
						color: #999;
						margin-top: 6rpx;
						line-height: 1;
						font-size: 20rpx;
					}

					.tabbar-text-select {
						font-weight: 900;
						color: #222222;
					}
				}
			}
		}
	}
</style>