feat: 三种方式的图标,tabbar都支持
This commit is contained in:
parent
7cf16d608c
commit
695486e41f
@ -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',
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
@ -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'
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user