底部导航

关于自定义 tabbar 的几种方案：

1. page 高度 100% + 超出隐藏，内容部分用 scroll-view 展示。但是无法避免 scroll-view 的性能问题。
2. 通过 uni.hideTabBar() 隐藏系统的 tabbar，然后在 tabbar 的每个页面都添加 cl-tabbar 组件。cl-tabbar-item 可以通过 v-for 渲染，列表数据可保存在 vuex 里。

平台差异

App	H5	微信小程序	支付宝小程序	头条小程序
√	√	√	√	√

Tabbar Props

参数	说明	类型	可选值	默认值
value	绑定值，对应 tabbar-item 的 name	string
color	默认颜色	string		#7A7E83
selected-color	选择颜色	boolean		#2B2E3D
border-style	边框颜色	boolean		#fff
background-color	背景颜色	string		#fff
before-switch	切换前验证方法	function(name, next)

Tabs Events

事件名称	说明	回调参数
change	选择时触发	name

Tabbar-item Props

参数	说明	类型	可选值	默认值
text	文本	string
name	标识值	string		#7A7E83
icon-path	默认图片	string		#2B2E3D
selected-icon-path	选中的图片	string		#fff
icon-size	图标大小	number / string		#fff
badge	角标值	number / string

Tabbar-item Slots

插槽名称	说明
default	自定义

示例

基本用法

<cl-tabbar v-model="active">
	<cl-tabbar-item
		text="首页"
		name="home"
		icon-path="/static/icon/tabbar/home.png"
		selected-icon-path="/static/icon/tabbar/home-hl.png"
	></cl-tabbar-item>

	<cl-tabbar-item
		text="活动"
		name="activity"
		icon-path="/static/icon/tabbar/activity.png"
		selected-icon-path="/static/icon/tabbar/activity-hl.png"
	></cl-tabbar-item>

	<cl-tabbar-item
		text="购物车"
		name="cart"
		icon-path="/static/icon/tabbar/shopping-cart.png"
		selected-icon-path="/static/icon/tabbar/shopping-cart-hl.png"
	></cl-tabbar-item>

	<cl-tabbar-item
		text="我的"
		name="my"
		icon-path="/static/icon/tabbar/my.png"
		selected-icon-path="/static/icon/tabbar/my-hl.png"
	></cl-tabbar-item>
</cl-tabbar>

自定义

<cl-tabbar v-model="active">
	<cl-tabbar-item
		text="首页"
		name="home"
		icon-path="/static/icon/tabbar/home.png"
		selected-icon-path="/static/icon/tabbar/home-hl.png"
	></cl-tabbar-item>

	<cl-tabbar-item
		text="活动"
		name="activity"
		icon-path="/static/icon/tabbar/activity.png"
		selected-icon-path="/static/icon/tabbar/activity-hl.png"
	></cl-tabbar-item>

	<!-- 自定义添加按钮 -->
	<cl-tabbar-item name="add">
		<view class="add">
			<image src="/static/icon/tabbar/add.png" />
		</view>
	</cl-tabbar-item>

	<cl-tabbar-item
		text="购物车"
		name="cart"
		icon-path="/static/icon/tabbar/shopping-cart.png"
		selected-icon-path="/static/icon/tabbar/shopping-cart-hl.png"
	></cl-tabbar-item>

	<cl-tabbar-item
		text="我的"
		name="my"
		icon-path="/static/icon/tabbar/my.png"
		selected-icon-path="/static/icon/tabbar/my-hl.png"
	></cl-tabbar-item>
</cl-tabbar>

切换前验证

<template>
	<cl-tabbar v-model="active" :before-switch="onBeforeSwitch">
		<cl-tabbar-item
			text="首页"
			name="home"
			icon-path="/static/icon/tabbar/home.png"
			selected-icon-path="/static/icon/tabbar/home-hl.png"
		></cl-tabbar-item>

		<cl-tabbar-item
			text="活动"
			name="activity"
			icon-path="/static/icon/tabbar/activity.png"
			selected-icon-path="/static/icon/tabbar/activity-hl.png"
		></cl-tabbar-item>

		<cl-tabbar-item
			text="购物车"
			name="cart"
			icon-path="/static/icon/tabbar/shopping-cart.png"
			selected-icon-path="/static/icon/tabbar/shopping-cart-hl.png"
		></cl-tabbar-item>

		<cl-tabbar-item
			text="我的"
			name="my"
			icon-path="/static/icon/tabbar/my.png"
			selected-icon-path="/static/icon/tabbar/my-hl.png"
		></cl-tabbar-item>
	</cl-tabbar>
</template>

<script>
	export default {
		methods: {
			onBeforeSwitch(name, next) {
				// 延迟选择
				setTimeout(() => {
					next();
				}, 1000);

				// 指定其他
				next("my");
			}
		}
	};
</script>