92 lines
2.6 KiB
Vue
92 lines
2.6 KiB
Vue
<template>
|
||
<!-- 页内只占位；官方栏挂上后不再画可见栏，避免叠两层 -->
|
||
<view class="ttb theme-tab-bar">
|
||
<!-- 首页走页面 padding 占位，避免 flex order 把这块插到轮播前面 -->
|
||
<view v-if="placeholder" class="ttb-ph" />
|
||
<view v-if="showVisual" class="ttb-fixed">
|
||
<view class="ttb-shell" :class="'ttb-shell--' + mode" :style="shellStyle">
|
||
<view
|
||
v-if="(mode === 'pill' || mode === 'line') && selected >= 0"
|
||
class="ttb-ind"
|
||
:class="'ttb-ind--' + mode"
|
||
:style="indStyle"
|
||
>
|
||
<view class="ttb-ind-core" :style="indCoreStyle" />
|
||
</view>
|
||
<view
|
||
v-if="mode === 'dot' && selected >= 0"
|
||
class="ttb-dot"
|
||
:style="dotStyle"
|
||
>
|
||
<view class="ttb-dot-core" :style="dotCoreStyle" />
|
||
</view>
|
||
<view
|
||
v-for="(item, index) in tabs"
|
||
:key="item.pagePath"
|
||
class="ttb-item"
|
||
:class="{ 'is-on': itemOn(index), 'is-draw': isDraw(index), 'is-stroke-ok': isDraw(index) && strokeOk }"
|
||
@tap="onTap(index)"
|
||
>
|
||
<view class="ttb-pair">
|
||
<view class="ttb-ico-wrap">
|
||
<image class="ttb-ico ttb-ico--off" :src="item.icon" mode="aspectFit" />
|
||
<image class="ttb-ico ttb-ico--on" :src="item.iconOn" mode="aspectFit" />
|
||
<canvas
|
||
:canvas-id="canvasId(index)"
|
||
:id="canvasId(index)"
|
||
class="ttb-cv"
|
||
:class="{ 'is-show': isDraw(index) }"
|
||
style="width: 28px; height: 28px;"
|
||
/>
|
||
</view>
|
||
<text class="ttb-txt" :style="{ color: textColor(index) }">{{ item.text }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="ttb-safe" />
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import tabBarLogic from '@/mixins/theme-tab-bar'
|
||
|
||
/**
|
||
* 页内底栏：占位 + 官方栏未挂时的可见兜底
|
||
* 有单例时动画打到 custom-tab-bar，这里不再自己滑
|
||
*/
|
||
export default {
|
||
name: 'ThemeTabBar',
|
||
mixins: [tabBarLogic],
|
||
props: {
|
||
/** 首页用页面 padding 占底，关掉这块以免插到图片中间 */
|
||
placeholder: { type: Boolean, default: true },
|
||
},
|
||
data() {
|
||
return { isNative: false }
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
@import '../../styles/theme-tab-bar.css';
|
||
.ttb {
|
||
order: 999;
|
||
width: 100%;
|
||
flex-shrink: 0;
|
||
}
|
||
.ttb-ph {
|
||
height: calc(60px + env(safe-area-inset-bottom));
|
||
background: transparent;
|
||
pointer-events: none;
|
||
}
|
||
.ttb-fixed {
|
||
position: fixed;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 980;
|
||
background: transparent;
|
||
}
|
||
</style>
|