feat: 三种方式的图标,tabbar都支持

This commit is contained in:
菲鸽 2024-05-11 21:26:56 +08:00
parent 7cf16d608c
commit 695486e41f
2 changed files with 24 additions and 7 deletions

View File

@ -28,15 +28,21 @@ export default defineUniPages({
list: [ list: [
{ {
pagePath: 'pages/index/index', pagePath: 'pages/index/index',
icon: 'home',
text: '首页', text: '首页',
icon: 'home',
iconType: 'wot',
},
{
pagePath: 'pages/index/about',
text: '关于',
icon: 'i-carbon-3d-mpr-toggle',
iconType: 'unocss',
}, },
{ {
pagePath: 'pages/my/index', pagePath: 'pages/my/index',
icon: 'user',
// 经过验证发现unocss这样跨文件动态图标无法显示所以先用wot icon 吧
// isUnocssIcon: true,
text: '我的', text: '我的',
icon: '/static/logo.svg',
iconType: 'local',
}, },
], ],
}, },

View File

@ -8,7 +8,12 @@
@change="selectTabBar" @change="selectTabBar"
> >
<block v-for="(item, idx) in tabbarList" :key="item.path"> <block v-for="(item, idx) in tabbarList" :key="item.path">
<!-- <wd-tabbar-item v-if="item.isUnocssIcon" :title="item.text"> <wd-tabbar-item
v-if="item.iconType === 'wot'"
:title="item.text"
:icon="item.icon"
></wd-tabbar-item>
<wd-tabbar-item v-else-if="item.iconType === 'unocss'" :title="item.text">
<template #icon> <template #icon>
<view <view
h-40rpx h-40rpx
@ -16,13 +21,19 @@
:class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']" :class="[item.icon, idx === tabbarStore.curIdx ? 'is-active' : 'is-inactive']"
></view> ></view>
</template> </template>
</wd-tabbar-item> --> </wd-tabbar-item>
<wd-tabbar-item :title="item.text" :icon="item.icon"></wd-tabbar-item> <wd-tabbar-item v-else-if="item.iconType === 'local'" :title="item.text">
<template #icon>
<image :src="item.icon" h-40rpx w-40rpx />
</template>
</wd-tabbar-item>
</block> </block>
</wd-tabbar> </wd-tabbar>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
// icon
// i-carbon-3d-mpr-toggle
import { tabBar } from '@/pages.json' import { tabBar } from '@/pages.json'
import { tabbarStore } from './tabbar' import { tabbarStore } from './tabbar'