提交 55c673a7 编写于 作者: D DCloud_LXH

fix(h5): custom-tab-bar visible question/132947

上级 bc6853f6
<template> <template>
<uni-tabbar <uni-tabbar
v-if="hasTabBar" v-if="hasTabBar"
v-show="showTabBar" v-show="showTabBar"
> >
<div <div
:style="{'flex-direction':direction==='vertical'?'column':'row',backgroundColor:tabBarOptions.backgroundColor}" :style="{'flex-direction':direction==='vertical'?'column':'row',backgroundColor:tabBarOptions.backgroundColor}"
class="uni-tabbar" class="uni-tabbar"
> >
<div <template v-for="(item,index) in tabBarOptions.list">
v-for="(item,index) in tabBarOptions.list" <div
:key="item.pagePath" v-if="item.visible !== false"
class="uni-tabbar__item" :key="item.pagePath"
@click="_switchTab(item,index)" class="uni-tabbar__item"
> @click="_switchTab(item,index)"
<div class="uni-tabbar__bd"> >
<div <div class="uni-tabbar__bd">
v-if="showIcon && item.iconPath" <div
:class="{'uni-tabbar__icon__diff':!item.text}" v-if="showIcon && item.iconPath"
class="uni-tabbar__icon" :class="{'uni-tabbar__icon__diff':!item.text}"
> class="uni-tabbar__icon"
<img :src="_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)">
<div
v-if="item.redDot"
:class="{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
> >
{{ item.badge }} <img :src="_getRealPath(selectedIndex===index?item.selectedIconPath:item.iconPath)">
<div
v-if="item.redDot"
:class="{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
>
{{ item.badge }}
</div>
</div> </div>
</div> <div
<div v-if="item.text"
v-if="item.text" :style="{color:selectedIndex===index?tabBarOptions.selectedColor:tabBarOptions.color,fontSize:showIcon&&item.iconPath?'10px':'14px'}"
:style="{color:selectedIndex===index?tabBarOptions.selectedColor:tabBarOptions.color,fontSize:showIcon&&item.iconPath?'10px':'14px'}" class="uni-tabbar__label"
class="uni-tabbar__label"
>
{{ item.text }}
<div
v-if="item.redDot&&(!showIcon || !item.iconPath)"
:class="{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
> >
{{ item.badge }} {{ item.text }}
<div
v-if="item.redDot&&(!showIcon || !item.iconPath)"
:class="{'uni-tabbar__badge':!!item.badge}"
class="uni-tabbar__reddot"
>
{{ item.badge }}
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </template>
</div> </div>
</uni-tabbar> </uni-tabbar>
</template> </template>
...@@ -140,4 +142,4 @@ export default { ...@@ -140,4 +142,4 @@ export default {
</script> </script>
<style> <style>
</style> </style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册