pageTabbar.vue 1.1 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. <template>
  2. <!-- 底部标签栏 -->
  3. <uv-tabbar :value="tabBarValue" activeColor="#2E64FA" inactiveColor="#C7CBD6" @change="changeTabBarValue">
  4. <uv-tabbar-item v-for="item in tabBarList" :key="item.pathName" :name="item.pathName" :text="item.text">
  5. <template v-slot:active-icon>
  6. <image class="icon" :src="item.selectedIconPath" style="width:48rpx;height:48rpx"></image>
  7. </template>
  8. <template v-slot:inactive-icon>
  9. <image class="icon" :src="item.iconPath" style="width:48rpx;height:48rpx"></image>
  10. </template>
  11. </uv-tabbar-item>
  12. </uv-tabbar>
  13. </template>
  14. <script setup>
  15. import uvTabbar from '@/uni_modules/uv-tabbar/components/uv-tabbar/uv-tabbar.vue';
  16. import uvTabbarItem from '@/uni_modules/uv-tabbar/components/uv-tabbar-item/uv-tabbar-item.vue';
  17. import { reactive } from 'vue';
  18. const emit = defineEmits(['ChangeTabBarValue']);
  19. const props = defineProps({
  20. tabBarValue: {//默认选中的tab
  21. type: String,
  22. default: () => ''
  23. },
  24. tabBarList: {
  25. type: Array,
  26. default: () => []
  27. }
  28. });
  29. const state = reactive({
  30. })
  31. //切换tabBar
  32. const changeTabBarValue = (name) => {
  33. emit('ChangeTabBarValue',name)
  34. }
  35. </script>