wangxiaowei/chazhi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

绘制首页和配置tabbar

Browse Source
This commit is contained in:
wangxiaowei
2025-08-14 14:30:12 +08:00
parent b817e31b69
commit a52154d9fc
33 changed files with 1617 additions and 1363 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/main.ts
View File

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

36
src/pages.json
View File

@ -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",
"selectedIconPath": "static/tabbar/exampleHL.png",
"pagePath": "pages/about/about",
"text": "关于"
"iconPath": "static/tabbar/reserve.png",
"selectedIconPath": "static/tabbar/reserve_s.png",
"pagePath": "pages/reserve/reserve",
"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": [

164
src/pages/index/index.vue
View File

@ -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 safeAreaInsets
let systemInfo
let keyword = ref('')
let navbarHeight = ref(0)
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>
<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>
<style lang="scss">
.home-bg {
background-color: $cz-page-background;
background-image: url(#{$OSS}images/home_bg.png);
background-size: 100% auto;
background-repeat: no-repeat;
}
<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>
.search-box {
display: flex;
height: 100%;
align-items: center;
--wot-search-padding: 0;
--wot-search-side-padding: 0;
<!-- #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 -->
:deep() {
.wd-search {
background: transparent !important;
}
<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>
.wd-search__input {
// #ifdef MP
padding-left: 32px !important;
padding-right: 0 !important;
// #endif
// #ifndef MP
padding-right: 0 !important;
// #endif
}
}
}
</style>

120
src/pages/my/my.vue Normal file
View File

@ -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>

120
src/pages/reserve/reserve.vue Normal file
View File

@ -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>

BIN
src/static/icon/icon_arrow_down.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 260 B

BIN
src/static/images/home_bg.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 23 KiB

BIN
src/static/tabbar/example.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/static/tabbar/exampleHL.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/static/tabbar/home.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 799 B

BIN
src/static/tabbar/homeHL.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/static/tabbar/home_s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/static/tabbar/my.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
src/static/tabbar/my_s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
src/static/tabbar/personal.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.4 KiB

BIN
src/static/tabbar/personalHL.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

BIN
src/static/tabbar/reserve.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 656 B

BIN
src/static/tabbar/reserve_s.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
src/static/tabbar/scan.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 3.9 KiB

24
src/tabbar/config.ts
View File

@ -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',
selectedIconPath: 'static/tabbar/exampleHL.png',
pagePath: 'pages/about/about',
text: '关于',
iconPath: 'static/tabbar/reserve.png',
selectedIconPath: 'static/tabbar/reserve_s.png',
pagePath: 'pages/reserve/reserve',
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 的关联点，如果没有对应上，会有问题！！

3
src/uni.scss
View File

@ -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/';

10
src/utils/index.ts
View File

@ -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
}