更新

2023-10-12 11:02:14 +08:00
parent e331393f09
commit 7bd17a3692
15 changed files with 497 additions and 265 deletions
--- a/components/tabbar/index.vue
+++ b/components/tabbar/index.vue
@@ -0,0 +1,121 @@
+<template>
+	<view class="container">
+		<view class="item" v-for="item,index in menuList">
+			<image :src="currentPage == index ? item.selectedIconPath :item.iconPath" @click="jump(item.pagePath)"></image>
+			<!-- {{index}} -->
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			currentPage: Number
+		},
+		data() {
+			return {
+				menuList: [{
+						// 首页
+						"pagePath": "/pages/tabbar/home/home",
+						"iconPath": "../../static/img/tabbar/home.png",
+						"selectedIconPath": "../../static/img/tabbar/homeactive.png"
+					},
+					{
+						// 油站
+						"pagePath": "/pages/tabbar/station/stationList",
+						"iconPath": "../../static/img/tabbar/oil.png",
+						"selectedIconPath": "../../static/img/tabbar/oilactive.png"
+
+					},
+					{
+						// 加油
+						"pagePath": "/pages/tabbar/qrCenter/qrCenter",
+						"iconPath": "../../static/img/tabbar/icon.png",
+						"selectedIconPath": "../../static/img/tabbar/icon.png"
+					},
+
+					{
+						// 订单
+						"pagePath": "/pages/tabbar/order/orderList/orderList",
+						"iconPath": "../../static/img/tabbar/order.png",
+						"selectedIconPath": "../../static/img/tabbar/orderactive.png"
+					},
+					{
+						// 司机
+						"pagePath": "/pages/tabbar/user/user",
+						"iconPath": "../../static/img/tabbar/me.png",
+						"selectedIconPath": "../../static/img/tabbar/meactive.png"
+					}
+				]
+			}
+		},
+		methods: {
+			jump(path) {
+				console.log('path',path)
+				uni.switchTab({
+					url:path
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		display: flex;
+		position: fixed;
+		left: 0;
+		bottom: 0;
+		width: 100%;
+		height: 120rpx;
+		background: #fff;
+
+		.item {
+			position: relative;
+			flex: 1;
+			text-align: center;
+			line-height: 120rpx;
+
+			image {
+				width: 50rpx;
+				height: 50rpx;
+
+			}
+
+			&:nth-of-type(2) {
+				image {
+					position: relative;
+					left: -13rpx
+				}
+
+				;
+			}
+
+			&:nth-of-type(4) {
+				image {
+					position: relative;
+					right: -13rpx
+				}
+
+				;
+			}
+
+			&:nth-of-type(3) {
+				flex: none;
+				width: 110rpx;
+				height: 110rpx;
+				position: relative;
+				transform: translateY(-30%);
+				border-radius: 100%;
+				overflow: hidden;
+				background: #fff;
+
+				image {
+					width: 100%;
+					height: 100%;
+				}
+			}
+		}
+
+	}
+</style>