Tabbar

Tabbar 类似uni-app原生tabbar组件,可用于自定义tabbar,自定义tabbar逻辑可参考小程序自定义tabbar,建议使用原生tabbar。 微信小程序使用案例:https://github.com/dingyong0214/AfterSale

组件结构

<template>
	<view class="tui-tabbar" :class="{ 'tui-tabbar-fixed': isFixed, 'tui-unlined': unlined }" :style="{ background: backgroundColor }">
		<block v-for="(item, index) in tabBar" :key="index">
			<view
				class="tui-tabbar-item"
				:class="{ 'tui-item-hump': item.hump }"
				:style="{ backgroundColor: item.hump ? backgroundColor : 'none' }"
				@tap="tabbarSwitch(index, item.hump, item.pagePath, item.verify)"
			>
				<view class="tui-icon-box" :class="{ 'tui-tabbar-hump': item.hump }">
					<image :src="current == index ? item.selectedIconPath : item.iconPath" :class="[item.hump ? '' : 'tui-tabbar-icon']"></image>
					<view :class="[item.isDot ? 'tui-badge-dot' : 'tui-badge']" :style="{ color: badgeColor, backgroundColor: badgeBgColor }" v-if="item.num">
						{{ item.isDot ? '' : item.num }}
					</view>
				</view>
				<view class="tui-text-scale" :class="{ 'tui-text-hump': item.hump }" :style="{ color: current == index ? selectedColor : color }">{{ item.text }}</view>
			</view>
		</block>
		<view :class="{ 'tui-hump-box': hump }" v-if="hump && !unlined"></view>
	</view>
</template>

组件脚本

<script>
	export default {
		name: "tuiTabbar",
		
		...省略n行
		
	}
</script>

组件样式

... 此处省略n行

脚本说明

props

参数 类型 描述 默认值
current Number 当前tabbar索引 0
color String 字体颜色 #666
selectedColor String 字体选中颜色 #5677FC
backgroundColor String 背景颜色 #FFFFFF
hump Boolean 是否需要中间凸起按钮 false
isFixed Boolean 是否固定在底部 true
tabBar Array tabbar列表 []
badgeColor String 角标字体颜色 #fff
badgeBgColor String 角标背景颜色 #F74D54
unlined Boolean 去掉顶部细线 false

tabBar数据项详细

名称 描述
pagePath 页面路径
text 标题
iconPath 图标地址
selectedIconPath 选中图标地址
hump 是否为凸起图标
num 角标数量
isDot 角标是否为圆点
verify 是否验证 (如登录)

methods

名称 描述
@click tababr切换点击事件

示例

H5预览地址

https://www.thorui.cn/h5/#/pages/extend/tabbar/tabbar

H5二维码

小程序二维码