Skip to content

Tab 标签页

介绍

选项卡组件,用于在不同的内容区域之间进行切换。
该组件为实验性组件,后期可能发生变更

按需引入

将components目录下easy-tabs组件复制到你的项目conponents目录。

代码演示

基础用法

html
<template>
    <easy-tabs :list="list" @change="onChange"></easy-tabs>
</template>
<script>
	export default {
		data() {
			return {
				list: ['标签一', '标签二', '标签三', '标签四'] as string[]
			};
		},
		methods:{
			onChange(index:number){
				uni.showToast({
					title:'点击'+index
				})
			}
		}
	}
</script>
<template>
    <easy-tabs :list="list" @change="onChange"></easy-tabs>
</template>
<script>
	export default {
		data() {
			return {
				list: ['标签一', '标签二', '标签三', '标签四'] as string[]
			};
		},
		methods:{
			onChange(index:number){
				uni.showToast({
					title:'点击'+index
				})
			}
		}
	}
</script>

卡片模式

通过type设置为卡片模式,默认为line线条模式

html
<template>
    <easy-tabs :list="list" @change="onChange" type="card"></easy-tabs>
</template>
<template>
    <easy-tabs :list="list" @change="onChange" type="card"></easy-tabs>
</template>

自定义颜色

默认使用了uni.scss中的$uni-color-primary变量。
如果您不想修改全局$uni-color-primary变量,可以直接修改组件中的.active样式

API

Props

参数说明类型默认值
list标签列表array-
type模式stringline

Events

事件名说明回调参数
change切换标签事件回调index: number

Released under the MIT License.