创建uniapp基础形态

2026-07-15 17:39:10 +08:00
parent 743c5cb4eb
commit 11e0763766
22 changed files with 5311 additions and 43 deletions
@@ -0,0 +1,179 @@
+<template>
+
+	<view class="app-tabbar">
+
+		<view class="tabbar-pill">
+
+			<view
+
+				v-for="tab in tabs"
+
+				:key="tab.name"
+
+				class="tab-item"
+
+				:class="{ active: current === tab.name }"
+
+				@tap="onChange(tab.name)"
+
+			>
+
+				<FaIcon
+
+					:name="tab.icon"
+
+					:color="current === tab.name ? '#3c9cff' : '#9acafc'"
+
+					:size="20"
+
+				/>
+
+				<text class="tab-text">{{ tab.text }}</text>
+
+			</view>
+
+		</view>
+
+		<view class="safe-area" />
+
+	</view>
+
+</template>
+
+
+
+<script setup>
+
+const props = defineProps({
+
+	current: {
+
+		type: String,
+
+		default: 'dashboard'
+
+	}
+
+})
+
+
+
+const tabs = [
+
+	{ name: 'dashboard', text: '仪表盘', icon: 'table-cells' },
+
+	{ name: 'features', text: '功能', icon: 'grip' },
+
+	{ name: 'profile', text: '我的', icon: 'user' }
+
+]
+
+
+
+const routes = {
+
+	dashboard: '/pages/dashboard/dashboard',
+
+	features: '/pages/features/features',
+
+	profile: '/pages/profile/profile'
+
+}
+
+
+
+function onChange(name) {
+
+	if (name === props.current) return
+
+	uni.redirectTo({ url: routes[name] })
+
+}
+
+</script>
+
+
+
+<style scoped>
+
+.app-tabbar {
+
+	flex-shrink: 0;
+
+	padding: 16rpx 32rpx 0;
+
+	background: #ffffff;
+
+}
+
+
+
+.tabbar-pill {
+
+	display: flex;
+
+	align-items: center;
+
+	justify-content: space-around;
+
+	background: #ffffff;
+
+	border: 2rpx solid #e8f0f8;
+
+	border-radius: 999rpx;
+
+	padding: 16rpx 12rpx;
+
+}
+
+
+
+.tab-item {
+
+	flex: 1;
+
+	display: flex;
+
+	flex-direction: column;
+
+	align-items: center;
+
+	gap: 6rpx;
+
+	padding: 8rpx 0;
+
+}
+
+
+
+.tab-text {
+
+	font-size: 22rpx;
+
+	color: #9acafc;
+
+}
+
+
+
+.tab-item.active .tab-text {
+
+	color: #3c9cff;
+
+	font-weight: 500;
+
+}
+
+
+
+.safe-area {
+
+	height: constant(safe-area-inset-bottom);
+
+	height: env(safe-area-inset-bottom);
+
+}
+
+</style>
+
+