|
|
|
|
@ -1,16 +1,19 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="tabbar-shell" :class="{ 'is-hidden': !tabbarVisible }">
|
|
|
|
|
<up-tabbar :value="activeIndex" :activeColor="activeColor" :inactiveColor="inactiveColor" :safeAreaInsetBottom="true"
|
|
|
|
|
:fixed="true" :placeholder="true" :border="false" @change="handleChange" zIndex="1000">
|
|
|
|
|
<up-tabbar :value="activeIndex" :activeColor="activeColor" :inactiveColor="inactiveColor"
|
|
|
|
|
:safeAreaInsetBottom="true" :fixed="true" :placeholder="true" :border="false" @change="handleChange"
|
|
|
|
|
zIndex="1000">
|
|
|
|
|
<up-tabbar-item v-for="(item, index) in tabList" :key="index" :text="item.text" :name="index">
|
|
|
|
|
<template #active-icon>
|
|
|
|
|
<uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="30" :color="activeColor" />
|
|
|
|
|
<u-icon v-else-if="item.iconType === 'uview-plus'" :name="item.iconName" size="30" :color="activeColor"></u-icon>
|
|
|
|
|
<u-icon v-else-if="item.iconType === 'uview-plus'" :name="item.iconName" size="30"
|
|
|
|
|
:color="activeColor"></u-icon>
|
|
|
|
|
<image v-else :src="item.selectedIcon" class="tabbar-icon" mode="widthFix" />
|
|
|
|
|
</template>
|
|
|
|
|
<template #inactive-icon>
|
|
|
|
|
<uni-icons v-if="item.iconType === 'uni-icons'" :type="item.iconName" size="30" :color="inactiveColor" />
|
|
|
|
|
<u-icon v-else-if="item.iconType === 'uview-plus'" :name="item.iconName" size="30" :color="inactiveColor"></u-icon>
|
|
|
|
|
<u-icon v-else-if="item.iconType === 'uview-plus'" :name="item.iconName" size="30"
|
|
|
|
|
:color="inactiveColor"></u-icon>
|
|
|
|
|
<image v-else :src="item.icon" class="tabbar-icon" mode="widthFix" />
|
|
|
|
|
</template>
|
|
|
|
|
</up-tabbar-item>
|
|
|
|
|
@ -166,13 +169,14 @@ watch(() => useUserStore().menus, () => {
|
|
|
|
|
width: 48rpx;
|
|
|
|
|
height: 48rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
:deep(.u-tabbar-item__text) {
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
.u-tabbar {
|
|
|
|
|
flex: none !important;
|
|
|
|
|
}
|
|
|
|
|
.u-tabbar-item__text{
|
|
|
|
|
margin-top: 0 !important;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|