邓洁 : 自定义tabbar

2023-10-31 17:46:59 +08:00
parent 8c3655cfcb
commit c9b285e4e9
11 changed files with 170 additions and 10 deletions
--- a/components/TabBar/TabBar.vue
+++ b/components/TabBar/TabBar.vue
@@ -0,0 +1,157 @@
+<template>
+	<view class="tabbar-container">
+		<block>
+			<view class="tabbar-item" v-for="(item,index) in tabbarList" :class="[item.centerItem ? ' center-item' : '']"
+				@click="changeItem(item)">
+				<view class="item-top">
+					<image :src="currentItem==item.id?item.selectIcon:item.icon"></image>
+				</view>
+				<view class="item-bottom" :class="[currentItem==item.id ? 'item-active' : '']">
+					<text>{{item.text}}</text>
+				</view>
+			</view>
+		</block>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			currentPage: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				currentItem: 0,
+				tabbarList: [{
+					id: 0,
+					path: "/pages/index/index",
+					icon: "/static/tabbar/di_icon_syh.png",
+					selectIcon: "/static/tabbar/di_icon_sy.png",
+					text: "首页",
+					centerItem: false
+				}, {
+					id: 1,
+					path: "/pages/shopTransfer/shopTransfer",
+					icon: "/static/tabbar/di_icon_zrh.png",
+					selectIcon: "/static/tabbar/di_icon_zr.png",
+					text: "店铺转让",
+					centerItem: false
+				}, {
+					id: 2,
+					path: "/pages/publish/publish",
+					icon: "/static/tabbar/di_icon_fb@2x.png",
+					selectIcon: "/static/tabbar/di_icon_fb@2x.png",
+					text: "发布",
+					centerItem: true
+				}, {
+					id: 3,
+					path: "/pages/shopAddress/shopAddress",
+					icon: "/static/tabbar/di_icon_dzh.png",
+					selectIcon: "/static/tabbar/di_icon_dz.png",
+					text: "找店地址",
+					centerItem: false
+				}, {
+					id: 4,
+					path: "/pages/my/my",
+					icon: "/static/tabbar/di_icon_wdh.png",
+					selectIcon: "/static/tabbar/di_icon_wd.png",
+					text: "店铺转让",
+					centerItem: false
+				}]
+
+			};
+		},
+		mounted() {
+			this.currentItem = this.currentPage;
+			uni.hideTabBar();
+		},
+		methods: {
+			changeItem(item) {
+				let _this = this;
+				//_this.currentItem = item.id;  
+				uni.switchTab({
+					url: item.path
+				});
+			}
+		}
+	}
+</script>
+<style>
+	view {
+		padding: 0;
+		margin: 0;
+		box-sizing: border-box;
+	}
+
+	.tabbar-container {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		width: 100%;
+		height: 98rpx;
+		display: flex;
+		align-items: center;
+		/* padding: 5rpx 0; */
+		color: #999999;
+		z-index: 200;
+		background-color: #fff;
+	}
+
+	.tabbar-container .tabbar-item {
+		width: 20%;
+		height: 82rpx;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		text-align: center;
+	}
+
+	.tabbar-container .item-active {
+		color: #339967;
+	}
+
+	.tabbar-container .center-item {
+		display: block;
+		position: relative;
+	}
+
+	.tabbar-container .tabbar-item .item-top {
+		width: 46rpx;
+		height: 46rpx;
+		padding: 0rpx;
+	}
+
+	.tabbar-container .center-item .item-top {
+		flex-shrink: 0;
+		width: 100rpx;
+		height: 100rpx;
+		position: absolute;
+		top: -61rpx;
+		left: calc(50% - 50rpx);
+		border-radius: 50%;
+	}
+
+	.tabbar-container .tabbar-item .item-top image {
+		width: 100%;
+		height: 100%;
+	}
+
+	tabbar-container .tabbar-item:nth-child(3) .item-top image {
+		background: #ff0000;
+	}
+
+	.tabbar-container .tabbar-item .item-bottom {
+		font-size: 20rpx;
+		width: 100%;
+		margin-top: 3rpx;
+	}
+
+	.tabbar-container .center-item .item-bottom {
+		position: absolute;
+		bottom: 5rpx;
+	}
+</style>