Tui-Plus3.0.0

Appearance

Tabs (标签导航) ​

组织和管理多个页面的切换

支持平台 ​

安卓ios鸿蒙web微信小程序
√√√√√

示例代码 ​

html
<template>
	<view>
		<t-page title="tabs" main-class="p-30">
			<t-card title='Tabs 标签导航' main-class="tdr tdb mb-30" sub-title="组织和管理多个页面的切换"></t-card>
			<t-section title='基础使用-type-size' main-class="tdr tdb mb-30"></t-section>
			<t-tabs main-class="tdr tdb mb-30" bar-class="twhr-20" :current="current" @change="ontabschange" type="p"
				size="large">
				<t-tabs-item v-for="(item,i) in tabsList2" :key="i" :value="i" :title="item.title"
					:disabled="item.disabled==null?false:item.disabled" :badge="item.value!=null && (item.value!)>0"
					:badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
			</t-tabs>
			<t-tabs main-class="tdr tdb mb-30" :current="current" @change="ontabschange" type="e" size="medium">
				<t-tabs-item v-for="(item,i) in tabsList2" :key="i" :value="i" :title="item.title"
					:disabled="item.disabled==null?false:item.disabled" :badge="item.value!=null && (item.value!)>0"
					:badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
			</t-tabs>
			<t-tabs main-class="tdr tdb mb-30" :current="current" @change="ontabschange" type="w" size="small">
				<t-tabs-item v-for="(item,i) in tabsList2" :key="i" :value="i" :title="item.title"
					:disabled="item.disabled==null?false:item.disabled" :badge="item.value!=null && (item.value!)>0"
					:badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
			</t-tabs>
			<t-tabs main-class="tdr tdb mb-30" :current="current" @change="ontabschange" type="s" size="mini">
				<t-tabs-item v-for="(item,i) in tabsList2" :key="i" :value="i" :title="item.title"
					:disabled="item.disabled==null?false:item.disabled" :badge="item.value!=null && (item.value!)>0"
					:badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
			</t-tabs>
			<t-section title='禁用滚动+设置主题' main-class="tdr tdb mb-30"></t-section>
			<t-tabs main-class="tdr tdb mb-30" :current="current" @change="ontabschange" type="s" size="large"
				:scrollable="true">
				<t-tabs-item v-for="(item,i) in tabsList1" :key="i" :value="i" :title="item.title"
					:disabled="item.disabled==null?false:item.disabled" :badge="item.value!=null && (item.value!)>0"
					:badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
			</t-tabs>
			<t-section title='滚动条插槽+右侧菜单按钮' main-class="tdr tdb mb-30"></t-section>
			<t-tabs main-class="tdr tdb mb-30" :current="current" @change="ontabschange" type="p" size="large"
				:scrollable="true" rightIcon="list" bar-class="bgn w-30 h-10" right-icon-class="s-60">
				<template v-slot:bar>
					<t-image main-class="w-30 h-10" src="/pagesA/static/image/tabsline.png"></t-image>
				</template>
				<t-tabs-item v-for="(item,i) in tabsList1" :key="i" :value="i" :title="item.title"
					:disabled="item.disabled==null?false:item.disabled" :badge="item.value!=null && (item.value!)>0"
					:badge-attrs="{dot:item.dot ?? false,text:`${item.value==null?0:item.value}`}"></t-tabs-item>
			</t-tabs>
			<!-- <t-section title='禁用滚动+设置主题' main-class="tdr tdb mb-30"></t-section>
			<t-tabs main-class="tdr tdb mb-30" type='p' :current="current" :tabs="tabsList1"></t-tabs>
			<t-section title='bar样式设置' main-class="tdr tdb mb-30"></t-section>
			<t-tabs main-class="tdr tdb mb-30" :current="current" :tabs="tabsList2" bar-class="twh-15"></t-tabs>
			<t-section title='滚动条插槽+右侧菜单' main-class="tdr tdb mb-30"></t-section>
			<t-tabs main-class="tdr tdb mb-30" rightIcon="list" :current="current" :tabs="tabsList1">
				<template v-slot:bar>
					<t-image main-class="w-30 h-10" src="/pagesA/static/image/tabsline-png"></t-image>
				</template>
			</t-tabs> -->
		</t-page>
	</view>
</template>
<script>
	import { TuiApi } from '@/api'
	type TuiTabsOption = {
		disabled ?: boolean
		dot ?: boolean
		title : string
		value ?: number
	}
	export default {
		data() {
			return {
				current: 2,
				rowsSize: [['35rpx', '600rpx'], ['35rpx', '300rpx'], ['35rpx', '500rpx'], ['35rpx', '400rpx']],
				tabsList: [] as UTSJSONObject[],
				tabsList1: [] as TuiTabsOption[],
				tabsList2: [] as TuiTabsOption[]
			};
		},
		created() {
			TuiApi('testTabslist',{},true).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>

属性 ​

名称类型默认值说明可选值
sizeStringmini组件尺寸large(大尺寸), medium(中尺寸), small(小尺寸), mini(迷你)
typeString""组件类型info(信息), primary(正常), error(错误), warning(警告), success(成功)
disabledBooleanfalse组件是否禁用false, true
stopBooleanfalse是否阻止事件冒泡（Tui统一写法处理事件冒泡）false, true
hoverBooleantrue是否有点击效果false, true
pathString""点击组件后跳转的页面路径，如果为空则响应点击事件，如果不为空则跳转页面不会响应单击事件。-
mainClassString""组件根节点的样式-
nativeClassString""组件根节点原生样式-
effectString"normal"组件显示主题normal(正常), dark(深色), light(浅色), plain(镂空)
scrollableBooleanfalse是否可滚动
rightIconClassString``右侧图标的样式
currentNumber1当前滑块所在的索引
rightIconString``右侧图标名称
barClassString``滑块的样式

事件 ​

名称返回参数说明
click(e : UniPointerEvent)-
change(index: number)当标签切换时触发

插槽 ​

名称返回值说明
name-
default-