123

2026-07-14 11:56:33 +08:00
parent 54750f6e3c
commit e4c29a08b4
167 changed files with 29581 additions and 0 deletions
@@ -0,0 +1,81 @@
+<template>
+	<view class="tab-bar">
+		<view class="tab-bar-item" v-for="(item, index) in tabList" :key="index" @click="switchTab(index)">
+			<image class="tab-icon" :src="current === index ? item.selectedIconPath : item.iconPath"></image>
+			<text class="tab-text" :style="{ color: current === index ? selectedColor : color }">{{ item.text }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'TabBar',
+		props: {
+			current: {
+				type: Number,
+				default: 0
+			}
+		},
+		data() {
+			return {
+				color: '#999999',
+				selectedColor: '#007aff',
+				backgroundColor: '#ffffff',
+				tabList: [
+					{
+						pagePath: '/pages/index/index',
+						iconPath: '/static/shouye.png',
+						selectedIconPath: '/static/shouye_select.png',
+						text: '首页'
+					},
+					{
+						pagePath: '/pages/mine/mine',
+						iconPath: '/static/wode.png',
+						selectedIconPath: '/static/wode_select.png',
+						text: '我的'
+					}
+				]
+			}
+		},
+		methods: {
+			switchTab(index) {
+				if (this.current === index) return;
+				uni.switchTab({
+					url: this.tabList[index].pagePath
+				})
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.tab-bar {
+		position: fixed;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		height: 100rpx;
+		background-color: #ffffff;
+		display: flex;
+		align-items: center;
+		justify-content: space-around;
+		border-top: 1rpx solid #F2F2F7;
+		padding-bottom: env(safe-area-inset-bottom);
+	}
+	.tab-bar-item {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		flex: 1;
+		height: 100%;
+	}
+	.tab-icon {
+		width: 48rpx;
+		height: 48rpx;
+		margin-bottom: 4rpx;
+	}
+	.tab-text {
+		font-size: 22rpx;
+	}
+</style>