wk-view

Appearance

On this page

wkv-tabs ​

标签页，组件简介

用法 ​

html
<wkv-tabs :tabs="tabs"	v-model:active-index="activeIndex"></wkv-tabs>

Props ​

属性名类型默认值说明
tabsArray[]如果为对象数组标签名称则默认取 name 字段
nameKeyStringname标签名取值字段
typeStringline取值 line card
tabHeight[Number,String]35标签栏高度
activeIndexNumber0标签默认激活索引，可通过 v-model:active-index 进行双向绑定
bgColorString#FFFFFF标签栏背景颜色
activeColorString主题色点亮色
activeCardTextColorString#FFFtype 为 card 时，字体点亮色
inactiveColorString#666666未激活时字体色
activeFontSize[Number,String]15激活字体大小
inactiveFontSize[Number,String]15未激活时字体大小
stickyBoleanfalse是否吸顶
stickyTop[Number,String]0吸顶时距离顶部距离
aliginStringcenter可取值left center right around scroll
lineWidth[Number,String]40%指示器宽度
lineHeight[Number,String]3指示器高度

Events ​

事件名事件说明函数签名参数说明
change标签点击时响应事件(item, index) => voiditem: 点击项数据
index: 点击项索引
update:activeIndex点亮标签索引，结合 v-model:active-index 使用(index) => voidindex: 当前索引

示例 ​

vue
<template>
	<view class="wkv-tabbar-example">
		<wk-section>普通：</wk-section>
		<wkv-tabs
			:tabs="tabs1"
			v-model:active-index="currentIndex1"
			@change="changeTab"
			aligin="left"
			type="line"
		/>
		<view style="height: 20px"></view>
		<wkv-tabs
			:tabs="tabs2"
			v-model:active-index="currentIndex2"
			@change="changeTab"
			aligin="center"
			type="line"
		/>
		<view style="height: 20px"></view>
		<wkv-tabs
			:tabs="tabs3"
			v-model:active-index="currentIndex3"
			@change="changeTab"
			aligin="right"
			type="line"
		/>
		
		<wk-section>吸顶：</wk-section>
		<wkv-tabs
			:tabs="tabs4"
			v-model:active-index="currentIndex4"
			@change="changeTab"
			:sticky="true"
			sticky-top="0px"
			bg-color="#FFF"
			aligin="around"
			type="line"
		/>
		
		<wk-section>滚动：</wk-section>
		<wkv-tabs
			:tabs="tabs5"
			v-model:active-index="currentIndex5"
			@change="changeTab"
			aligin="scroll"
			type="line"
		/>
		
		<wk-section>卡片：</wk-section>
		<wkv-tabs
			:tabs="tabs6"
			v-model:active-index="currentIndex"
			@change="changeTab"
			aligin="around"
			type="card"
		/>
		<view style="height: 20px"></view>

		<wkv-tabs
			:tabs="tabs7"
			v-model:active-index="currentIndex6"
			@change="changeTab"
			aligin="around"
			type="card"
		/>
		<view style="height: 1220px"></view>
	</view>
</template>
scss
<style>
.wkv-tabbar-example {
	padding: 20px;
	display: flex;
	flex-direction: column;
	background-color: #f2f2f210;
}
</style>