Tabs 标签导航

支持平台

安卓	ios	web	微信小程序	支付宝小程序	QQ小程序
√	√	√	x	x	x

示例

<template>
	<t-page title="tabs" class="p.30">
		<t-card title='Tabs 标签导航' class="tdr-tdb-mb.30" sub-title="组织和管理多个页面的切换"></t-card>
		<t-section title='基础使用' class="tdr-tdb-mb.30"></t-section>
		<t-tabs class="tdb-tdr-mb.30" v-if="tabsList2.length>0" :current="current" :tabs="tabsList2"
			@change="ontabschange"></t-tabs>
		<t-section title='禁用滚动+设置主题' class="tdr-tdb-mb.30"></t-section>
		<t-tabs class="tdb-tdr-mb.30" v-if="tabsList1.length>0" type='p' :current="current" :tabs="tabsList1"
			:scrollabel="false"></t-tabs>
		<t-section title='bar样式设置' class="tdr-tdb-mb.30"></t-section>
		<t-tabs class="tdb-tdr-mb.30" v-if="tabsList2.length>0" :current="current" :tabs="tabsList2"
			bar-class="twh.15"></t-tabs>
		<t-section title='滚动条插槽+右侧菜单' class="tdr-tdb-mb.30"></t-section>
		<t-tabs class="tdb-tdr-mb.30" v-if="tabsList1.length>0" rightIcon="list" :current="current" :tabs="tabsList1"
			:scrollabel="false">
			<template v-slot:bar>
				<t-image class="w.30-h.10" src="/static/image/tabsline.png"></t-image>
			</template>
		</t-tabs>

	</t-page>
</template>

<script>
	import { viteApi } from '@/api/uriApi.uts'
	import { TuiTabsOption } from '@/uni_modules/t-ui'
	export default {
		data() {
			return {
				current: 0,
				rowsSize: [['35rpx', '600rpx'], ['35rpx', '300rpx'], ['35rpx', '500rpx'], ['35rpx', '400rpx']],
				tabsList: [] as UTSJSONObject[],
				tabsList1: [] as TuiTabsOption[],
				tabsList2: [] as TuiTabsOption[]
			};
		},
		created() {
			viteApi('testTabslist').then((res) => {
				// this.tabsList = (res['data'] as UTSJSONObject)['list1'] as UTSJSONObject[]
				this.tabsList1 = JSON.parse<TuiTabsOption[]>(JSON.stringify((res['data'] as UTSJSONObject)['list2'] as UTSJSONObject[])) as TuiTabsOption[]
				this.tabsList2 = JSON.parse<TuiTabsOption[]>(JSON.stringify((res['data'] as UTSJSONObject)['list5'] as UTSJSONObject[])) as TuiTabsOption[]
			})
		},
		methods: {
			ontabschange(cur : number) {
				console.log(cur)
			},
			iconClick() {
				uni.showToast({
					title: '点击右侧插槽'
				})
			}
		},
	}
</script>

<style lang=" scss">

</style>

Props

名称	描述	类型	默认值	可选值
size	标签尺寸	String	'mini'	-
type	标签类型	String	'error'	-
tabs	标签数据	TuiTabsOption[]	[]	-
current	当前激活的标签索引	Number	0	-
scrollabel	菜单是否可滚动	Boolean	true	true, false
itemClass	标签项类名	String	'true'	-
barClass	标签栏类名	String	'true'	-
rightIcon	右侧图标	String	''	-
rightIconClass	右侧图标类名	String	''	-

Events

事件名	描述	回调参数	版本
change	当标签切换时触发	(index: number)	-

Slots

名称	描述
default	标签内容
right	右侧内容

Methods

名称	描述	参数
setBarRect	设置标签栏的位置	(index: number)
setCurState	设置当前标签的状态	(index: number)
setCurInstance	设置标签实例的状态	(index: number, state: boolean)