wk-view

Appearance

On this page

wkv-tabbar ​

底部导航栏，组件简介

用法 ​

html
<wkv-tabbar
	:tabs="[
		{ label: '页面1', activeIcon: '/static/icon_home_pressed.png', inactiveIcon: '/static/icon_home_normal.png' },
		{ label: '页面2', activeIcon: '/static/icon_home_pressed.png', inactiveIcon: '/static/icon_home_normal.png' },
	]"
	:red-dots="{ visible: true, index: 1, type: 'number', count: 6 }"
	:fixed-bottom="true"
	v-model:active-index="1"
	active-color="#FF0000"
	inactive-color="#666666"
	nav-height="60px"
	font-size="14px"
	icon-size="30px"
	bg-color="#FFFF00"
	@tab-click="handleTabClick"
/>

Props ​

属性名类型默认值说明
tabsObject-底部导航栏数据源，示例：{ label: '页面1', activeIcon: '/static/icon_home_pressed.png', inactiveIcon: '/static/icon_home_normal.png' }
activeIndexNumber0默认点亮 tab 索引， 可通过 v-model:active-index 进行双向绑定
bgColorString#FFFFFF默认背景颜色
activeColorString主题色点亮字体颜色
inactiveColorString#FFFFFF普通字体颜色
navHeight[Number,String]50默认高度
fontSize[Number,String]10字体颜色
iconSize[Number,String]26图标大小
fixedBottomBooleantrue是否固定在屏幕下方
redDotsObject{ visible: false, index: 0, type: 'number', count: 0}红点配置，type 支持 number、dots

Events ​

事件名事件说明函数签名参数说明
tabClicktab 点击事件(item, index) => voiditem: 点击项数据
index: 点击项索引
update:activeIndex更新选中项，可结合v-model:active-index 使用(index) => voidindex: 当前索引

示例 ​

vue
<template>
	<view class="wkv-tabbar-example">
		<wk-section>默认：</wk-section>
		<view>
			<wkv-button size="small" type="primary" @click="handleFixedClick">
				{{ fixedStatus.text }}
			</wkv-button>
			<wkv-button size="small" type="primary" @click="redDots.visible = !redDots.visible">
				{{ !redDots.visible ? '红点提示' : '关闭红点' }}
			</wkv-button>
			<wkv-button
				v-if="redDots.visible"
				size="small"
				type="secondary"
				@click="redDots.type === 'number' ? (redDots.type = 'dots') : (redDots.type = 'number')"
			>
				{{ redDots.type === 'number' ? '普通红点提示' : '数字红点提示' }}
			</wkv-button>
		</view>
		<div style="height: 10px" />

		<wkv-tabbar
			:tabs="[
				{
					label: '页面1',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
				{
					label: '页面2',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
			]"
			:red-dots="redDots"
			:fixed-bottom="fixedStatus.fixed"
			v-model:active-index="activieIndex1"
			@tab-click="handleTabClick"
		/>
		<div style="height: 30px" />
		
		<wk-section>修改字体颜色：</wk-section>
		<wkv-tabbar
			:tabs="[
				{
					label: '页面1',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
				{
					label: '页面2',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
				{
					label: '页面3',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
			]"
			:fixed-bottom="false"
			v-model:active-index="activieIndex2"
			active-color="#FF0000"
			inactive-color="#666666"
			@tab-click="handleTabClick"
		/>
		<div style="height: 30px" />
		
		<wk-section>修改高度/图标/字体大小：</wk-section>
		<wkv-tabbar
			:tabs="[
				{
					label: '页面1',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
				{
					label: '页面2',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
				{
					label: '页面3',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
				{
					label: '页面4',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
			]"
			v-model:active-index="activieIndex3"
			:fixed-bottom="false"
			nav-height="60px"
			font-size="14px"
			icon-size="30px"
			@tab-click="handleTabClick"
		/>
		<div style="height: 30px" />
		
		<wk-section>修改背景颜色：</wk-section>
		<wkv-tabbar
			:tabs="[
				{
					label: '页面1',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
				{
					label: '页面2',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
				{
					label: '页面3',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
				{
					label: '页面4',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
				{
					label: '页面5',
					activeIcon: '/static/icon_home_pressed.png',
					inactiveIcon: '/static/icon_home_normal.png',
				},
			]"
			:fixed-bottom="false"
			v-model:active-index="activieIndex4"
			bg-color="#FFFF00"
			@tab-click="handleTabClick"
		/>
	</view>
</template>
vue
<script setup lang="ts">
import { reactive, ref } from 'vue'

const activieIndex1 = ref(0)
const activieIndex2 = ref(1)
const activieIndex3 = ref(2)
const activieIndex4 = ref(3)

const fixedStatus = reactive({ fixed: false, text: '固定底部' })
const redDots = reactive({ visible: true, index: 1, type: 'number', count: 6 })

const handleFixedClick = () => {
	fixedStatus.fixed = !fixedStatus.fixed
	fixedStatus.text = fixedStatus.fixed ? '取消固定' : '固定底部'
}

const handleTabClick = (tab: any, index: number) => {
	console.log('点击了:', tab)
}
</script>
scss
<style lang="scss">
.wkv-tabbar-example {
	padding: 20px;
	display: flex;
	flex-direction: column;
	background-color: #f2f2f210;
}
</style>