TMUI4x(鸿蒙Next)

Appearance

TMUI4x2025-09-25
1113
4.5m

底部导航 xTabbar ​

在线预览
在线模拟尺寸:

介绍 ​

可定义凸起按钮。通过全局状态设置选中项，放于任何页面可自动选中。组件的镂空因平台而有兼容差异，微信sdk不支持相关api，因为在微信端请务必is-canvas-render设置为false

平台兼容 ​

HarmonyH5andriodIOS小程序UTSUNIAPP-X SDKversion
☑☑☑️☑️☑️☑️4.76+1.1.18

文件路径 ​

ts

@/uni_modules/tmx-ui/components/x-tabbar/x-tabbar.uvue

使用 ​

ts

<x-tabbar></x-tabbar>

Props 属性 ​

名称说明类型默认值
color未选中时的颜色
string"#b9b9b9"
selectedColor选中时的颜色，空值取全局主题
string""
bgColor背景,如果你为空，会读取全局的亮色tabbar背景
string"white"
darkBgColor暗黑时的背景，如果为空，取全局的底部导航背景色。
string""
showTopBorder显示顶部边线，暗黑时取全局的borderDarkColor
booleantrue
borderColor边线颜色
string"#f0f0f0"
fontSize文字大小
string"11px"
iconSize图标大小
string"28px"
autoTabbarHeight导航的整体高度，请使用v-model:autoTabbarHeight="x"
来获取当前的高度。外部要去变更值。这个只是对外输出，
给您 外部放在底部占位用，省得你们要一屏时计算高。外部最好computed使用，因为是异步的
number0
outIndex需要向外凸起的项目索引。
-1表示不凸起
number2
outBgColor凸起的背景色
string"primary"
outIconColor凸起的图标颜色
string"white"
isOutSpace是否开启凸起背景镂空，截止sdk 4.31 ios有bug官方已经知晓在修复
booleantrue
outReserve是否反向凸起就是不镂空，但在凸起的底层会被绘制背景。false是镂空，true表示反向包住。
截止sdk 4.31 ios有bug官方已经知晓在修复
booleanfalse
position是否悬浮在底部,不可动态修改
fixed悬浮，relative静态布局。
string'fixed'
linearGradient渐变背景，如果提供，上面的背景和暗黑背景将失效。
仅支持:to bottom,to right,to left,to top
例：['to right','#ff667f','#ff5416']
string[]() : string[] => [] as string[]
list如果你提供了本地的list数据，那么全局的list将不会被采用，你需要自己管理激活引，
跨页面时需要你自己设置当前页面的索引，因为变量索引是无法跨页面的。
TABBAR_ITEM_INFO[]() : TABBAR_ITEM_INFO[] => [] as TABBAR_ITEM_INFO[]
activeIndex当前激活的索引,如果你提供了本地索引，那全局的索引将失效。
跨页面时需要你自己设置当前页面的索引，因为变量索引是无法跨页面的。
仅当月list不为空时有效。
number-1
zIndex层级
number20
firstRenderTimeout首次渲染等待时长
如果你在首页或者第一页使用时，如果渲染异常，请通过调节这个值来使用其正常
主要是针对安卓ios。对web不起效
如果是次页，时间不需要太长。时间长短时你页面渲染时长而定。
页面元素过多，排版较长时可能需要设置超过350ms，正常的次页100-150ms即可。
number300
isCanvasRender是否开启canvas渲染引擎，开启后，可以得到
异形的镂空效果。比view渲染的更精致好看。开启后前面的firstRenderTimeout要注意阅读
两种渲染版本请自行选择使用。微信端不支持canvas渲染，有相关接口微信sdk没有对齐平台，因此一定要设置为false
booleantrue

Events 事件 ​

名称参数说明
clickindex: number项目被点击时触发。
doubleClickindex: number项目被双击时触发。
changeindex: number切换项目时触发。
update:autoTabbarHeightheight: number同步组件高给外部使用，请使用v-model:autoTabbarHeight
组件高度 = 安全栏高度 + 导航栏高度,外部最好computed使用，因为是异步的

Slots 插槽 ​

名称说明数据
out凸起图标插槽。active: boolean
active: number
size: boolean
size: number
item子项目插槽，以便完全自定义化样式。isactive: number
isactive: boolean
isactive: number
selfindex: number
selfindex: boolean
selfindex: number
children: number
children: boolean
children: number
activeindex: number
activeindex: boolean
activeindex: number

Ref 方法 ​

名称参数返回值说明

示例文件路径 ​

json

/pages/daohang/tabbar

示例源码 ​

uvue
vue
<template>
	<!-- #ifdef MP-WEIXIN -->
	<page-meta :page-style="`background-color:${xThemeConfigBgColor}`">
		<navigation-bar :background-color="xThemeConfigNavBgColor" :front-color="xThemeConfigNavFontColor"></navigation-bar>
	</page-meta>
	<!-- #endif -->
	<view style="flex:1;display: flex;flex-direction: column;">
		<scroll-view class="flex-1" :scroll-y="true">
			<x-sheet>
				<x-text font-size="18" class=" text-weight-b mb-8">底部导航 xTabbar</x-text>
				<x-text  color="#999999" >本组件使用全局来控制选中荐和数据，因此在在各个页面放置本组件后。不需要再赋值当前选中项和数据了。解决以往很多同学不会用的问题。is-canvas-render在微信端必须要为false</x-text>
			</x-sheet>
			
			<x-sheet :margin="['12']">
				<x-text font-size="18" class=" text-weight-b mb-8">凸起</x-text>
				<x-text  color="#999999" >使用时-1表示关闭</x-text>
				<view class="mt-20 flex flex-row">
					<x-button @click="outIndex=2" class="mr-20">打开凸起</x-button>
					<x-button @click="outIndex=-1" >关闭凸起</x-button>
				</view>
			</x-sheet>
			<!-- #ifndef MP -->
			<x-sheet :margin="['12']">
				<x-text font-size="18" class=" text-weight-b">向上凸起</x-text>
			</x-sheet>
			<x-tabbar 
			:outIndex="outIndex" 
			:is-canvas-render="true" 
			:outReserve="true"
			class="mb-24" 
			color="rgba(255, 255, 0, 0.5)" 
			bg-color="#5555ff"
			out-icon-color="#5555ff"
			dark-bg-color="#5555ff"
			out-bg-color="yellow" 
			selected-color="yellow" 
			position="relative" >
			</x-tabbar>
			<x-tabbar
			:outIndex="outIndex" 
			:is-canvas-render="true" 
			:outReserve="true"
			class="mb-24" 
			color="rgba(0,0,0,0.5)"  
			out-bg-color="#1cd86b" 
			selected-color="#000000" 
			:linear-gradient="['to right','#cef85a','#1cd86b']" 
			position="relative" >
			</x-tabbar>
			
			<x-sheet :margin="['12']">
				<x-text font-size="18" class=" text-weight-b">向内凹陷</x-text>
			</x-sheet>
			<x-tabbar 
			:outIndex="outIndex" 
			:is-canvas-render="true" 
			:outReserve="false"
			class="mb-24" 
			color="rgba(255, 255, 0, 0.5)" 
			bg-color="#5555ff"
			out-icon-color="#5555ff"
			dark-bg-color="#5555ff"
			out-bg-color="yellow" 
			selected-color="yellow" 
			position="relative" >
			</x-tabbar>
			<x-tabbar
			:outIndex="outIndex"
			:is-canvas-render="true" 
			:outReserve="false"
			class="mb-24" 
			color="rgba(0,0,0,0.5)"  
			out-bg-color="#1cd86b" 
			selected-color="#000000" 
			:linear-gradient="['to right','#cef85a','#1cd86b']" 
			position="relative" >
			</x-tabbar>
			
			<!-- #endif -->
			
			
			<x-sheet :margin="['12']">
				<x-text font-size="18" class=" text-weight-b">关闭canvas绘制</x-text>
			</x-sheet>
			
			<x-tabbar :outIndex="outIndex" :is-canvas-render="false" class="mb-24" color="rgba(0,0,0,0.64)"  out-bg-color="#16ee9c" selected-color="#000000" :linear-gradient="['to right','#20f8be','#1cd86b']" position="relative" >
			</x-tabbar>
			<x-tabbar :outIndex="-1" :is-canvas-render="false" class="mb-24" color="rgba(0,0,0,0.64)"  out-bg-color="#16ee9c" selected-color="#000000" :linear-gradient="['to right','#20f8be','#1cd86b']" position="relative" >
			</x-tabbar>
			
			
			<x-sheet :margin="['12']">
				<x-text font-size="18" class=" text-weight-b">个性化，关闭isCanvasRender</x-text>
				<x-text  color="#999999" >非isCanvasRender渲染，没有镂空等异形渲染效果。效果没有开启的好看。请自行选择使用效果。</x-text>
				<x-button @click="changeList" :block="true">切换局部标签</x-button>
			</x-sheet>
			<x-tabbar :isCanvasRender="false"  
			 :list="list2"
			 class="mb-24" color="#fff" out-icon-color="#921fff" out-bg-color="#ffffff" selected-color="#ff0" :linear-gradient="['to right','#921fff','#2952ff']" position="relative" >
			</x-tabbar>
			<x-sheet :margin="['12']">
				<x-text font-size="18" class=" text-weight-b mb-8">关于占位问题</x-text>
				<x-text  color="#999999" >
					组件通过v-model:autoTabbarHeight="autoTabbarHeight"来对外输入占位高度。
					例本页面就是通过属性控制占位达到一屏效果，请下拉体验。
					也要可以通过xStore.xTabbarConfig.tabaarHeight读取
					当前高：{{tabbaerHeight}}
				</x-text>
			</x-sheet>
			<x-sheet v-for="index in 3" :key="index">
				<x-text>{{index+1}} / 24向下滑动页面，占位一屏。</x-text>
			</x-sheet>
			
			<!-- 占位 -->
			<view :style="{height:autoTabbarHeight+'px'}"></view>
			
			<x-tabbar :outIndex="outIndex" v-model:autoTabbarHeight="autoTabbarHeight" color="#808080" >
				<template v-slot:item="{isactive,children,selfindex}">
					<text v-if="selfindex!=2" :style="{color:(isactive as boolean)?_color:'#808080'}">
						{{(children as TABBAR_ITEM).title}}
					</text>
				</template>
			</x-tabbar>
		</scroll-view>
		
	</view>
	
</template>

<script setup lang="ts">
	import { ref, computed, onBeforeMount } from 'vue'
	import { TABBAR_ITEM_INFO,NAVIGATE_TYPE,TABBAR_ITEM } from "@/uni_modules/tmx-ui/interface.uts"
	import { xStore } from "@/uni_modules/tmx-ui/index.uts"
	
	const autoTabbarHeight = ref(0)
	const outIndex = ref(2)
	const list = ref<TABBAR_ITEM_INFO[]>([
		{title:"首页",icon:"home-smile-2-line",selectedIcon:"home-smile-2-fill",dotType:'dot'} as TABBAR_ITEM_INFO,
		{title:"分类",icon:"drive-line",selectedIcon:"drive-fill"} as TABBAR_ITEM_INFO,
		{title:"购物车",icon:"shopping-basket-line",selectedIcon:"shopping-basket-fill"} as TABBAR_ITEM_INFO,
		{title:"统计",icon:"bar-chart-2-line",selectedIcon:"bar-chart-2-fill",dotLabel:'99+',} as TABBAR_ITEM_INFO,
		{title:"我的",icon:"group-line",selectedIcon:"group-fill"} as TABBAR_ITEM_INFO
	])
	// 局部使用
	const list2 = ref<TABBAR_ITEM_INFO[]>([
		{title:"首页",icon:"home-smile-2-line",selectedIcon:"home-smile-2-fill",dotType:'dot'} as TABBAR_ITEM_INFO,
		{title:"分类",icon:"drive-line",selectedIcon:"drive-fill"} as TABBAR_ITEM_INFO,
		{title:"购物车",icon:"shopping-basket-line",selectedIcon:"shopping-basket-fill"} as TABBAR_ITEM_INFO,
		{title:"统计",icon:"bar-chart-2-line",selectedIcon:"bar-chart-2-fill",dotLabel:'99+',} as TABBAR_ITEM_INFO,
		{title:"我的",icon:"group-line",selectedIcon:"group-fill"} as TABBAR_ITEM_INFO
	])
	
	const _color = computed<string>(() => xStore.xConfig.color)
	const tabbaerHeight = computed<number>(() => xStore.xTabbarConfig.tabaarHeight)
	
	onBeforeMount(() => {
		// 全局一个时
		xStore.xTabbarConfig.list = list.value
	})
	
	const changeList = () => {
		list2.value = [
			{title:"首页",icon:"home-smile-2-line",selectedIcon:"home-smile-2-fill",dotType:'dot'} as TABBAR_ITEM_INFO,
			{title:"分类",icon:"drive-line",selectedIcon:"drive-fill"} as TABBAR_ITEM_INFO,
			{title:"我的",icon:"group-line",selectedIcon:"group-fill"} as TABBAR_ITEM_INFO
		] as TABBAR_ITEM_INFO[]
	}
	
	const changBadge = () => {
		list.value[3]!.dotLabel = '2'
	}
</script>

<style lang="scss">

</style>
最近更新