绘制首页和配置tabbar

src/main.ts

@@ -14,6 +14,7 @@ export function createApp() {
 	app.use(routeInterceptor)
 	app.use(requestInterceptor)
 	app.use(VueQueryPlugin)
+	app.provide('OSS', '/src/static/')
 
 	return {
 		app,

src/pages.json

@@ -15,7 +15,7 @@
     }
   },
   "tabBar": {
-    "custom": true,
+    "custom": false,
     "color": "#999999",
     "selectedColor": "#018d71",
     "backgroundColor": "#F8F8F8",
@@ -27,15 +27,21 @@
     "list": [
       {
         "iconPath": "static/tabbar/home.png",
-        "selectedIconPath": "static/tabbar/homeHL.png",
+        "selectedIconPath": "static/tabbar/home_s.png",
         "pagePath": "pages/index/index",
         "text": "首页"
       },
       {
-        "iconPath": "static/tabbar/example.png",
+        "iconPath": "static/tabbar/reserve.png",
-        "selectedIconPath": "static/tabbar/exampleHL.png",
+        "selectedIconPath": "static/tabbar/reserve_s.png",
-        "pagePath": "pages/about/about",
+        "pagePath": "pages/reserve/reserve",
-        "text": "关于"
+        "text": "预约"
+      },
+      {
+        "iconPath": "static/tabbar/my.png",
+        "selectedIconPath": "static/tabbar/my_s.png",
+        "pagePath": "pages/my/my",
+        "text": "我的"
       }
     ]
   },
@@ -72,6 +78,24 @@
       "style": {
         "navigationBarTitleText": "Vue Query 请求演示"
       }
+    },
+    {
+      "path": "pages/my/my",
+      "type": "page",
+      "layout": "tabbar",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "我的"
+      }
+    },
+    {
+      "path": "pages/reserve/reserve",
+      "type": "page",
+      "layout": "tabbar",
+      "style": {
+        "navigationStyle": "custom",
+        "navigationBarTitleText": "预约"
+      }
     }
   ],
   "subPackages": [

src/pages/index/index.vue

@@ -1,122 +1,86 @@
 <!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
-<route lang="jsonc" type="home">
+<route lang="jsonc" type="home">{
-{
 	"layout": "tabbar",
 	"style": {
 		// 'custom' 表示开启自定义导航栏，默认 'default'
 		"navigationStyle": "custom",
 		"navigationBarTitleText": "首页"
 	}
-}
+}</route>
-</route>
+
+<template>
+	<view class="home-bg">
+		<view class="home-bg w-[100vw] fixed top-0 left-0">
+			<wd-navbar safeAreaInsetTop :bordered="false" custom-style="background-color: transparent !important;">
+				<template #left>
+					<view class="">
+						<view class="">上海</view>
+						<wd-img width="14rpx" height="9rpx" :src="`${OSS}icon/icon_arrow_down.png`" />
+					</view>
+				</template>
+				<template #title>
+					<view class="search-box">
+						<wd-search v-model="keyword" hide-cancel placeholder-left></wd-search>
+					</view>
+				</template>
+			</wd-navbar>
+		</view>
+
+		<!-- 内容区：自动避让粘性导航栏高度 -->
+		<view class="content" :style="{ paddingTop: navbarHeight + 'px' }">
+			<view v-for="(item, index) in 100" :key="index">123--{{ index }}</view>
+		</view>
+	</view>
+</template>
 
 <script lang="ts" setup>
+	import { ref, inject } from 'vue'
+	import { getNavBarHeight } from '@/utils/index'
+
 	defineOptions({
 		name: 'Home',
 	})
 
-// 获取屏幕边界到安全区域距离
+	let keyword = ref('')
-let safeAreaInsets
+	let navbarHeight = ref(0)
-let systemInfo
+	let OSS = inject('OSS')  // '@/static/'
 
-// #ifdef MP-WEIXIN
-// 微信小程序使用新的API
-systemInfo = uni.getWindowInfo()
-safeAreaInsets = systemInfo.safeArea
-  ? {
-      top: systemInfo.safeArea.top,
-      right: systemInfo.windowWidth - systemInfo.safeArea.right,
-      bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
-      left: systemInfo.safeArea.left,
-    }
-  : null
-// #endif
-
-// #ifndef MP-WEIXIN
-// 其他平台继续使用uni API
-systemInfo = uni.getSystemInfoSync()
-safeAreaInsets = systemInfo.safeAreaInsets
-// #endif
-const author = ref('菲鸽')
-const description = ref(
-  'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
-)
-// 测试 uni API 自动引入
 	onLoad(() => {
-  console.log('项目作者:', author.value)
+		navbarHeight.value = getNavBarHeight()
 	})
 
-console.log('index')
 </script>
 
-<template>
+<style lang="scss">
-  <view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
+.home-bg {
-    <view class="mt-10">
+	background-color: $cz-page-background;
-      <image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
+	background-image: url(#{$OSS}images/home_bg.png);
-    </view>
+	background-size: 100% auto;
-    <view class="mt-4 text-center text-4xl text-[#d14328]">
+	background-repeat: no-repeat;
-      unibest
+}
-    </view>
-    <view class="mb-8 mt-2 text-center text-2xl">
-      最好用的 uniapp 开发模板
-    </view>
 
-    <view class="m-auto mb-2 max-w-100 text-justify indent text-4">
+.search-box {
-      {{ description }}
+	display: flex;
-    </view>
+	height: 100%;
-    <view class="mt-4 text-center">
+	align-items: center;
-      作者：
+	--wot-search-padding: 0;
-      <text class="text-green-500">
+	--wot-search-side-padding: 0;
-        菲鸽
-      </text>
-    </view>
-    <view class="mt-4 text-center">
-      官网地址：
-      <text class="text-green-500">
-        https://unibest.tech
-      </text>
-    </view>
 
-    <!-- #ifdef H5 -->
+	:deep() {
-    <view class="mt-4 text-center">
+		.wd-search {
-      <a href="https://unibest.tech/base/3-plugin" target="_blank" class="text-green-500">
+			background: transparent !important;
-        新手请看必看章节1：
+		}
-      </a>
-    </view>
-    <!-- #endif -->
-    <!-- #ifdef MP-WEIXIN -->
-    <view class="mt-4 text-center">
-      新手请看必看章节1：
-      <text class="text-green-500">
-        https://unibest.tech/base/3-plugin
-      </text>
-    </view>
-    <!-- #endif -->
-    <!-- #ifdef H5 -->
-    <view class="mt-4 text-center">
-      <a href="https://unibest.tech/base/14-faq" target="_blank" class="text-green-500">
-        新手请看必看章节2：
-      </a>
-    </view>
-    <!-- #endif -->
-    <!-- #ifdef MP-WEIXIN -->
-    <view class="mt-4 text-center">
-      新手请看必看章节2：
-      <text class="text-green-500">
-        https://unibest.tech/base/14-faq
-      </text>
-    </view>
-    <!-- #endif -->
 
-    <view class="mt-4 text-center">
+		.wd-search__input {
-      <wd-button type="primary">
+			// #ifdef MP
-        UI组件按钮
+			padding-left: 32px !important;
-      </wd-button>
+			padding-right: 0 !important;
-    </view>
+			// #endif
-    <view class="mt-4 text-center">
+
-      UI组件官网：<text class="text-green-500">
+			// #ifndef MP
-        https://wot-design-uni.cn
+			padding-right: 0 !important;
-      </text>
+			// #endif
-    </view>
+		}
-  </view>
+	}
-</template>
+}
+</style>

src/pages/my/my.vue

@@ -0,0 +1,120 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
+<route lang="jsonc" type="page">{
+	"layout": "tabbar",
+	"style": {
+		// 'custom' 表示开启自定义导航栏，默认 'default'
+		"navigationStyle": "custom",
+		"navigationBarTitleText": "我的"
+	}
+}</route>
+
+<template>
+	<view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
+		<view class="mt-10">
+			<image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
+		</view>
+		<view class="mt-4 text-center text-4xl text-[#d14328]">
+			unibest
+		</view>
+		<view class="mb-8 mt-2 text-center text-2xl">
+			最好用的 uniapp 开发模板
+		</view>
+
+		<view class="m-auto mb-2 max-w-100 text-justify indent text-4">
+			{{ description }}
+		</view>
+		<view class="mt-4 text-center">
+			作者：
+			<text class="text-green-500">
+				菲鸽
+			</text>
+		</view>
+		<view class="mt-4 text-center">
+			官网地址：
+			<text class="text-green-500">
+				https://unibest.tech
+			</text>
+		</view>
+
+		<!-- #ifdef H5 -->
+		<view class="mt-4 text-center">
+			<a href="https://unibest.tech/base/3-plugin" target="_blank" class="text-green-500">
+				新手请看必看章节1：
+			</a>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="mt-4 text-center">
+			新手请看必看章节1：
+			<text class="text-green-500">
+				https://unibest.tech/base/3-plugin
+			</text>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef H5 -->
+		<view class="mt-4 text-center">
+			<a href="https://unibest.tech/base/14-faq" target="_blank" class="text-green-500">
+				新手请看必看章节2：
+			</a>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="mt-4 text-center">
+			新手请看必看章节2：
+			<text class="text-green-500">
+				https://unibest.tech/base/14-faq
+			</text>
+		</view>
+		<!-- #endif -->
+
+		<view class="mt-4 text-center">
+			<wd-button type="primary">
+				UI组件按钮
+			</wd-button>
+		</view>
+		<view class="mt-4 text-center">
+			UI组件官网：<text class="text-green-500">
+				https://wot-design-uni.cn
+			</text>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+	name: 'Home',
+})
+
+// 获取屏幕边界到安全区域距离
+let safeAreaInsets
+let systemInfo
+
+// #ifdef MP-WEIXIN
+// 微信小程序使用新的API
+systemInfo = uni.getWindowInfo()
+safeAreaInsets = systemInfo.safeArea
+	? {
+		top: systemInfo.safeArea.top,
+		right: systemInfo.windowWidth - systemInfo.safeArea.right,
+		bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
+		left: systemInfo.safeArea.left,
+	}
+	: null
+// #endif
+
+// #ifndef MP-WEIXIN
+// 其他平台继续使用uni API
+systemInfo = uni.getSystemInfoSync()
+safeAreaInsets = systemInfo.safeAreaInsets
+// #endif
+const author = ref('菲鸽')
+const description = ref(
+	'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
+)
+// 测试 uni API 自动引入
+onLoad(() => {
+	console.log('项目作者:', author.value)
+})
+
+console.log('index')
+</script>

src/pages/reserve/reserve.vue

@@ -0,0 +1,120 @@
+<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page -->
+<route lang="jsonc" type="page">{
+	"layout": "tabbar",
+	"style": {
+		// 'custom' 表示开启自定义导航栏，默认 'default'
+		"navigationStyle": "custom",
+		"navigationBarTitleText": "预约"
+	}
+}</route>
+
+<template>
+	<view class="bg-white px-4 pt-2" :style="{ marginTop: `${safeAreaInsets?.top}px` }">
+		<view class="mt-10">
+			<image src="/static/logo.svg" alt="" class="mx-auto block h-28 w-28" />
+		</view>
+		<view class="mt-4 text-center text-4xl text-[#d14328]">
+			unibest
+		</view>
+		<view class="mb-8 mt-2 text-center text-2xl">
+			最好用的 uniapp 开发模板
+		</view>
+
+		<view class="m-auto mb-2 max-w-100 text-justify indent text-4">
+			{{ description }}
+		</view>
+		<view class="mt-4 text-center">
+			作者：
+			<text class="text-green-500">
+				菲鸽
+			</text>
+		</view>
+		<view class="mt-4 text-center">
+			官网地址：
+			<text class="text-green-500">
+				https://unibest.tech
+			</text>
+		</view>
+
+		<!-- #ifdef H5 -->
+		<view class="mt-4 text-center">
+			<a href="https://unibest.tech/base/3-plugin" target="_blank" class="text-green-500">
+				新手请看必看章节1：
+			</a>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="mt-4 text-center">
+			新手请看必看章节1：
+			<text class="text-green-500">
+				https://unibest.tech/base/3-plugin
+			</text>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef H5 -->
+		<view class="mt-4 text-center">
+			<a href="https://unibest.tech/base/14-faq" target="_blank" class="text-green-500">
+				新手请看必看章节2：
+			</a>
+		</view>
+		<!-- #endif -->
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="mt-4 text-center">
+			新手请看必看章节2：
+			<text class="text-green-500">
+				https://unibest.tech/base/14-faq
+			</text>
+		</view>
+		<!-- #endif -->
+
+		<view class="mt-4 text-center">
+			<wd-button type="primary">
+				UI组件按钮
+			</wd-button>
+		</view>
+		<view class="mt-4 text-center">
+			UI组件官网：<text class="text-green-500">
+				https://wot-design-uni.cn
+			</text>
+		</view>
+	</view>
+</template>
+
+<script lang="ts" setup>
+defineOptions({
+	name: 'Home',
+})
+
+// 获取屏幕边界到安全区域距离
+let safeAreaInsets
+let systemInfo
+
+// #ifdef MP-WEIXIN
+// 微信小程序使用新的API
+systemInfo = uni.getWindowInfo()
+safeAreaInsets = systemInfo.safeArea
+	? {
+		top: systemInfo.safeArea.top,
+		right: systemInfo.windowWidth - systemInfo.safeArea.right,
+		bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
+		left: systemInfo.safeArea.left,
+	}
+	: null
+// #endif
+
+// #ifndef MP-WEIXIN
+// 其他平台继续使用uni API
+systemInfo = uni.getSystemInfoSync()
+safeAreaInsets = systemInfo.safeAreaInsets
+// #endif
+const author = ref('菲鸽')
+const description = ref(
+	'unibest 是一个集成了多种工具和技术的 uniapp 开发模板，由 uniapp + Vue3 + Ts + Vite5 + UnoCss + VSCode 构建，模板具有代码提示、自动格式化、统一配置、代码片段等功能，并内置了许多常用的基本组件和基本功能，让你编写 uniapp 拥有 best 体验。',
+)
+// 测试 uni API 自动引入
+onLoad(() => {
+	console.log('项目作者:', author.value)
+})
+
+console.log('index')
+</script>

src/tabbar/config.ts

@@ -27,7 +27,7 @@ export const TABBAR_MAP = {
 }
 
 // TODO: 1/3. 通过这里切换使用tabbar的策略
-export const selectedTabbarStrategy = TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
+export const selectedTabbarStrategy = TABBAR_MAP.NATIVE_TABBAR
 
 // TODO: 2/3. 更新下面的 tabbar 配置
 // 如果是使用 NO_TABBAR(0)，nativeTabbarList 和 customTabbarList 都不生效(里面的配置不用管)
@@ -37,16 +37,28 @@ export const selectedTabbarStrategy = TABBAR_MAP.CUSTOM_TABBAR_WITH_CACHE
 export const nativeTabbarList: NativeTabBarItem[] = [
 	{
 		iconPath: 'static/tabbar/home.png',
-    selectedIconPath: 'static/tabbar/homeHL.png',
+		selectedIconPath: 'static/tabbar/home_s.png',
 		pagePath: 'pages/index/index',
 		text: '首页',
 	},
 	{
-    iconPath: 'static/tabbar/example.png',
+		iconPath: 'static/tabbar/reserve.png',
-    selectedIconPath: 'static/tabbar/exampleHL.png',
+		selectedIconPath: 'static/tabbar/reserve_s.png',
-    pagePath: 'pages/about/about',
+		pagePath: 'pages/reserve/reserve',
-    text: '关于',
+		text: '预约',
 	},
+	{
+		iconPath: 'static/tabbar/my.png',
+		selectedIconPath: 'static/tabbar/my_s.png',
+		pagePath: 'pages/my/my',
+		text: '我的',
+	},
+	// {
+	// 	iconPath: 'static/tabbar/example.png',
+	// 	selectedIconPath: 'static/tabbar/exampleHL.png',
+	// 	pagePath: 'pages/about/about',
+	// 	text: '关于',
+	// },
 ]
 
 // pagePath 是 nativeTabbarList 和 customTabbarList 的关联点，如果没有对应上，会有问题！！

src/uni.scss

@@ -75,3 +75,6 @@ $uni-color-subtitle: #555; // 二级标题颜色
 $uni-font-size-subtitle: 18px;
 $uni-color-paragraph: #3f536e; // 文章段落颜色
 $uni-font-size-paragraph: 15px;
+
+$cz-page-background: #F6F7F9; // 页面背景色
+$OSS: '/src/static/';

src/utils/index.ts

@@ -188,3 +188,13 @@ export function getEnvBaseUploadUrl() {
 
 	return baseUploadUrl
 }
+
+export function getNavBarHeight() {
+	const systemInfo = uni.getSystemInfoSync()
+	const statusBarHeight = systemInfo.statusBarHeight; // 状态栏高度（单位：px）
+	const titleBarHeight = 44; // 默认导航栏标题高度（iOS/Android 一般为 44px）
+	const navbarHeight = statusBarHeight + titleBarHeight; // 完整的导航栏高度
+	
+	console.log("🚀 ~ getNavBarHeight ~ navbarHeight:", navbarHeight)
+	return navbarHeight
+}