add:增加tabbar页面

src/components/tabbar/index.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import home from '@/static/image/tabbar/home.png'
+import home_select from '@/static/image/tabbar/home-select.png'
+import manual from '@/static/image/tabbar/manual.png'
+import manual_select from '@/static/image/tabbar/manual-select.png'
+import my from '@/static/image/tabbar/my.png'
+import my_select from '@/static/image/tabbar/my-select.png'
+import plan from '@/static/image/tabbar/plan.png'
+import plan_select from '@/static/image/tabbar/plan-select.png'
+
+const props = defineProps<{
+  page: number
+}>()
+interface BottomItem {
+  name: string
+  icon: any
+  icon_select: any
+  isSelected: boolean
+  url: string
+}
+
+const bottomList: Ref<BottomItem[]> = ref([
+  { name: '首页', icon: home, icon_select: home_select, isSelected: true, url: '' },
+  { name: '喂养计划', icon: plan, icon_select: plan_select, isSelected: false, url: '' },
+  { name: '养宠手册', icon: manual, icon_select: manual_select, isSelected: false, url: '' },
+  { name: '我的', icon: my, icon_select: my_select, isSelected: false, url: '' },
+])
+
+function handleBottom(item: BottomItem) {
+  // eslint-disable-next-line style/max-statements-per-line
+  bottomList.value.forEach((item2) => { item2.isSelected = false })
+  item.isSelected = true
+  uni.navigateTo({ url: item.url })
+}
+
+function onLoad() {
+  if (props.page) {
+    // eslint-disable-next-line style/max-statements-per-line
+    bottomList.value.forEach((item2) => { item2.isSelected = false })
+    bottomList.value[props.page - 1].isSelected = true
+  }
+}
+onLoad()
+</script>
+
+<template>
+  <view class="w-full p-2 fixed bottom-0 left-0 model">
+    <view class="w-full flex gap-2 ">
+      <view v-for="(item, index) in bottomList" :key="index" class="flex flex-col items-center justify-center w-1/4" @click="handleBottom(item)">
+        <image :src="item.isSelected ? item.icon_select : item.icon" class="w-8 h-8" />
+        <text
+          class="text-3 mt-1" :class="[item.isSelected ? 'bottom_select_span' : 'bottom_span']"
+        >
+          {{ item.name }}
+        </text>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.model{
+  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
+  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
+}
+
+.bottom_span{
+  color: #828282;
+}
+.bottom_select_span{
+  color: #4545E5;
+}
+</style>

src/pages/home/index.vue

@@ -1,11 +1,12 @@
 <script setup lang="ts">
-
+import Tabbar from "@/components/tabbar/index.vue"
 </script>
 
 <template>
   <view class="text-lg text-red-900">
     Hello World
   </view>
+  <Tabbar  :page="1"/>
 </template>
 
 <style scoped>