LandSurveyApplet/components/CustomTabBar.vue

<template>
  <view class="fixed bottom-0 left-0 right-0 z-999 bg-white b-t border-gray-200 flex h-100rpx">
    <view
        class="flex-1 flex flex-col items-center justify-center"
        v-for="(item, index) in tabs"
        :key="index"
        @click="switchTab(item, index)"
    >
      <image
          class="w-50rpx h-50rpx mb-4rpx"
          :src="current === index ? item.selectedIcon : item.icon"
      />
      <text :class="current === index ? 'text-blue-4' : 'text-gray-500'">
        {{ item.text }}
      </text>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  current: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['change'])

const tabs = [
  {
    text: '首页',
    pagePath: '/pages/index/index',
    icon: '/static/home.png',
    selectedIcon: '/static/home-selected.png'
  },
  {
    text: '我的',
    pagePath: '/pages/my/index',
    icon: '/static/my.png',
    selectedIcon: '/static/my-selected.png'
  }
]

const switchTab = (item, index) => {
  emit('change', index)
  uni.redirectTo({url: item.pagePath, animationType: 'none'})
}
</script>

<style scoped>
/* 如果你的 UnoCSS 未启用 rpx 转换，可以保留不动 */
</style>