i

src/components/Tabbar.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+import {Cart, Category, Home, My} from '@nutui/icons-vue-taro';
+import Taro from '@tarojs/taro';
+import {computed} from "vue";
+
+const prop = defineProps({
+  value: {
+    type: String,
+    default: "1"
+  },
+})
+
+let tabIndex = computed({
+  get() {
+    return prop.value
+  },
+  set(val) {
+    console.log(val)
+    // prop.value = val
+  }
+})
+
+const tabSwitch = (e) => {
+  console.log(e)
+  Taro.switchTab({
+    url: e.href
+  })
+}
+</script>
+
+<template>
+  <view>
+    <nut-tabbar bottom placeholder safe-area-inset-bottom @tab-switch="tabSwitch" v-model="tabIndex">
+      <nut-tabbar-item tab-title="首页" :icon="Home" name="1" href="/pages/index/index"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="分类" :icon="Category" name="2" href="/pages/category/index"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="购物车" :icon="Cart" name="3" href="/pages/cart/index"></nut-tabbar-item>
+      <nut-tabbar-item tab-title="我的" :icon="My" name="4" href="/pages/user/index"></nut-tabbar-item>
+    </nut-tabbar>
+  </view>
+</template>
+
+<style lang="scss">
+
+</style>