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>
|