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