Tabbar 标签栏

				
<template>
	<zk-theme type="page" :padding="0" showBack navbarTitle="Tabbar">
		<!-- 基础功能 -->
		<zk-theme type="card" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="20rpx" :padding="30" text="基础功能" />
			<zk-tabbar :zIndex='0' :list="basicTabList" :active="basicActiveTab" @change="onBasicTabChange" />
		</zk-theme>

		<!-- 显示徽标 -->
		<zk-theme type="card" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="20rpx" text="显示徽标" />
			<zk-tabbar :zIndex='0' :list="badgeTabList" :active="badgeActiveTab" @change="onBadgeTabChange" />
		</zk-theme>

		<!-- 自定义颜色 -->
		<zk-theme type="card" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="20rpx" text="自定义颜色" />
			<zk-tabbar :zIndex='0' :list="colorTabList" :active="colorActiveTab" active-color="#fff"
				inactive-color="#b2bec3" active-text-color="#fff" inactive-text-color="#636e72" background-color="#000"
				@change="onColorTabChange" />
		</zk-theme>
		<zk-theme type="card" :radius="16" margin="0 0 40rpx 0">
			<zk-tabbar :zIndex='0' :list="imageTabList1" :raisedHeight="200" :active="imageActiveTab1"
				@change="onCenterClick" />

		</zk-theme>
		<!-- 自定义图片 -->
		<zk-theme type="card" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="20rpx" text="自定义图片" />
			<zk-tabbar :zIndex='0' :list="imageTabList" :active="imageActiveTab" @change="onImageTabChange" />
		</zk-theme>

		<!-- 拦截切换事件 -->
		<zk-theme type="card" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="20rpx" text="拦截切换事件" />
			<zk-tabbar :zIndex='0' :list="interceptTabList" :active="interceptActiveTab"
				:before-change="beforeTabChange" @change="onInterceptTabChange" />
		</zk-theme>

		<!-- 去除上边框 -->
		<zk-theme type="card" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="20rpx" text="去除上边框" />
			<zk-tabbar :zIndex='0' :list="noBorderTabList" :active="noBorderActiveTab" :border="false"
				@change="onNoBorderTabChange" />
		</zk-theme>

		<!-- 固定在底部 -->
		<zk-theme type="card" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="20rpx" text="固定在底部" />
			<zk-tabbar :list="fixedTabList" :active="fixedActiveTab" :fixed="true" :z-index="1000"
				@change="onFixedTabChange" />
		</zk-theme>

		<!-- 为了防止固定的 Tabbar 遮挡内容，添加一个占位符 -->
		<view style="height: 100rpx;"></view>
	</zk-theme>
</template>
<script>
	export default {
		data() {
			return {
				imageActiveTab1: 0,
				basicActiveTab: 0,
				basicTabList: [{
						icon: 'home-6-line',
						activeIcon: 'home-6-line',
						text: '首页'
					},
					{
						icon: 'search-line',
						activeIcon: 'search-line',
						text: '搜索'
					},
					{
						icon: 'user-line',
						activeIcon: 'user-line',
						text: '我的'
					}
				],

				badgeActiveTab: 0,
				badgeTabList: [{
						icon: 'home-6-line',
						activeIcon: 'home-6-line',
						text: '首页'
					},
					{
						icon: 'shopping-cart-line',
						activeIcon: 'shopping-cart-line',
						text: '购物车',
						badge: '5'
					},
					{
						icon: 'chat-smile-2-line',
						activeIcon: 'chat-smile-2-line',
						text: '消息',
						badge: '99+'
					}
				],

				colorActiveTab: 0,
				colorTabList: [{
						icon: 'star-fill',
						activeIcon: 'star-fill',
						text: '收藏'
					},
					{
						icon: 'heart-3-fill',
						activeIcon: 'heart-3-fill',
						text: '喜欢'
					},
					{
						icon: 'settings-2-fill',
						activeIcon: 'settings-2-fill',
						text: '设置'
					}
				],

				imageTabList1: [{
						icon: 'home-6-line',
						activeIcon: 'home-6-line',
						text: '首页'
					},
					{
						icon: 'apps-line',
						activeIcon: 'apps-line',
						text: '社区'
					},
					{
						icon: 'add-large-line',
						activeIcon: 'add-large-line',
						text: '发布',
						raised: true

					},
					{
						icon: 'message-3-line',
						activeIcon: 'message-3-line',
						text: '消息'
					},
					{
						icon: 'user-line',
						activeIcon: 'user-line',
						text: '我的'
					}
				],


				imageActiveTab: 0,
				imageTabList: [{
						icon: '/static/tabbar/home0.png',
						activeIcon: '/static/tabbar/home1.png',
						text: '首页'
					},
					{
						icon: '/static/tabbar/cate0.png',
						activeIcon: '/static/tabbar/cate1.png',
						text: '分类'
					},
					{
						icon: '/static/tabbar/cart0.png',
						activeIcon: '/static/tabbar/cart1.png',
						text: '购物车'
					}
				],

				interceptActiveTab: 0,
				interceptTabList: [{
						icon: 'home-6-line',
						activeIcon: 'home-6-line',
						text: '首页'
					},
					{
						icon: 'user-line',
						activeIcon: 'user-line',
						text: '我的'
					},
					{
						icon: 'settings-2-fill',
						activeIcon: 'settings-2-fill',
						text: '设置'
					}
				],

				noBorderActiveTab: 0,
				noBorderTabList: [{
						icon: 'home-6-line',
						activeIcon: 'home-6-line',
						text: '首页'
					},
					{
						icon: 'search-line',
						activeIcon: 'search-line',
						text: '搜索'
					},
					{
						icon: 'user-line',
						activeIcon: 'user-line',
						text: '我的'
					}
				],

				fixedActiveTab: 0,
				fixedTabList: [{
						icon: 'home-6-line',
						activeIcon: 'home-6-line',
						text: '首页',
						badge: '99+'
					},
					{
						icon: 'search-line',
						activeIcon: 'search-line',
						text: '搜索'
					},
					{
						icon: 'user-line',
						activeIcon: 'user-line',
						text: '我的',
						badge: 'New'
					}
				]
			}
		},
		methods: {

			onCenterClick(index) {
				this.imageActiveTab1 = index;
			},

			onBasicTabChange(index) {
				this.basicActiveTab = index;
			},
			onBadgeTabChange(index) {
				this.badgeActiveTab = index;
			},
			onColorTabChange(index) {
				this.colorActiveTab = index;
			},
			onImageTabChange(index) {
				this.imageActiveTab = index;
			},
			onInterceptTabChange(index) {
				this.interceptActiveTab = index;
			},
			onNoBorderTabChange(index) {
				this.noBorderActiveTab = index;
			},
			onFixedTabChange(index) {
				this.fixedActiveTab = index;
			},
			beforeTabChange(index) {
				if (index === 2) {
					uni.showModal({
						title: '提示',
						content: '是否确认切换到设置页面？',
						success: (res) => {
							if (res.confirm) {
								this.interceptActiveTab = index;
							}
						}
					});
					return false;
				}
				return true;
			}
		}
	}
</script>

<style lang="scss">
	/* #ifndef APP-NVUE */
	.tabbar-placeholder {
		height: 100rpx;
		width: 100%;
	}

	/* #endif */

	/* #ifdef APP-NVUE */
	.tabbar-placeholder {
		height: 100rpx;
	}

	/* #endif */
</style>