1

components/my-tabBar/my-tabBar.vue

@@ -0,0 +1,80 @@
+//my-tabbar文件
+<template>
+  <view>
+    <u-tabbar
+      :value="currentTab"
+      :fixed="true"
+      :border="false"
+      activeColor="#0055a2"
+      :placeholder="false"
+      @change="changeTabIndex"
+    >
+      <u-tabbar-item
+        v-for="item in switchTabs"
+        :key="item.name"
+        :text="item.text"
+        :icon="item.iconName"
+      ></u-tabbar-item>
+    </u-tabbar>
+  </view>
+</template>
+
+<script setup>
+import { computed, reactive } from 'vue'
+
+let props = defineProps({
+  currentTab: {
+    type: Number,
+    default: 0
+  }
+})
+const switchTabs = reactive([
+  {
+    pagePath: '/pages/lims/index/index',
+    iconName: 'home',
+    text: '首页',
+    name: 'home'
+  },
+  {
+    pagePath: '/pages/me/index',
+    iconName: 'account',
+    text: '我的',
+    name: 'account'
+  }
+])
+// const switchTabs = computed(() => {
+//   return [
+//     {
+//       pagePath: '/pages/lims/index/index',
+//       iconName: 'home',
+//       text: '首页',
+//       name: 'home'
+//     },
+//     {
+//       pagePath: '/pages/me/index',
+//       iconName: 'account',
+//       text: '我的',
+//       name: 'account'
+//     }
+//   ]
+// })
+
+function changeTabIndex(e) {
+  let pagePath = switchTabs[e].pagePath
+  uni.switchTab({
+    url: pagePath
+  })
+}
+</script>
+<style lang="scss" scoped>
+::v-deep .u-tabbar__content {
+  background-color: #f2f2f2;
+  padding: 10rpx 0;
+  .u-icon__icon {
+    font-size: 54rpx !important;
+  }
+  .u-tabbar-item__text {
+    font-size: 38rpx;
+  }
+}
+</style>