标签 Tabs

• 支持自动居中
• 可以设置禁用项
• 支持禁止滚动
• 支持自定义标签项

插件市场地址

https://ext.dcloud.net.cn/plugin?name=pure-tabs

基础使用

• 通过 list 传入标签项数据
• 通过 keyName 设置显示的字段名
• 通过 current 设置初始化激活项下标

<pure-tabs :list="tabs" :current="current"></pure-tabs>

<script>
import { ref } from "vue";

// tabs
// item.disabled: 表示是否禁用
const tabs = ref([
	{ name: "服饰", value: 1 },
	{ name: "食品", value: 2, disabled: true },
	{ name: "数码", value: 3 },
	{ name: "家居", value: 4 },
	{ name: "母婴", value: 5 },
	{ name: "美妆", value: 6 },
	{ name: "鞋品", value: 7 },
	{ name: "箱包", value: 8 },
	{ name: "钟表", value: 9 },
	{ name: "汽车", value: 10 },
	{ name: "房产", value: 11 },
	{ name: "旅游", value: 12 },
	{ name: " Electronics", value: 13 },
	{ name: "其他", value: 14 },
]);
const current = ref(3);
</script>

禁止滚动

通过 scrollable 属性设置禁止滚动,默认为 true 开启滚动。

提示

禁止滚动时, items 的总宽度为 100%,适用于标签项比较少的场景

<pure-tabs :list="tabs" :current="current" :scrollable="false"></pure-tabs>

<script>
import { ref } from "vue";

// tabs
const tabs = ref([
	{ name: "服饰", value: 1 },
	{ name: "食品", value: 2 },
	{ name: "数码", value: 3 },
	{ name: "家居", value: 4 },
	{ name: "母婴", value: 5 },
]);
const current = ref(3);
</script>

收缩布局

通过 shrink 属性设置收缩布局,默认为 false 不开启收缩布局,收缩布局样式表现为 items 居左对齐。

<pure-tabs :list="tabs" :current="current" shrink></pure-tabs>

<script>
import { ref } from "vue";

// tabs
const tabs = ref([
	{ name: "服饰", value: 1 },
	{ name: "食品", value: 2 },
	{ name: "数码", value: 3 },
	{ name: "家居", value: 4 },
	{ name: "母婴", value: 5 },
]);
const current = ref(3);
</script>

自定义

通过 slot 可以自定义标签项内容和样式

提示

快手小程序: 由于快手小程序不支持 v-for 循环的 slot,所以在快手小程序中不生效,建议直接修改组件源码进行自定义。

提示

京东小程序: 相反的,由于京东小程序只支持默认的 slot,所以在京东小程序中只能使用这种自定义模式,传入 list 反而不会渲染数据了。

<!-- 京东小程序中生效,快手小程序中不生效 -->
<pure-tabs :list="tabs" :current="current">
    <template v-slot="{ item, index }">
        <view class="item">
            <pure-icon name="__shezhi"></pure-icon>
            {{ item.name }}
        </view>
    </template>
</pure-tabs>

异步切换

通过 async 属性设置异步切换,默认为 false 不开启异步切换。

提示

开启异步切换时,需手动监听 itemClick 事件,并在事件回调中手动切换 current 值。

<pure-tabs :list="tabs" :current="current" async @itemClick="handleClick"></pure-tabs>

<script>
import { ref } from "vue";

// tabs
// item.disabled: 表示是否禁用
const tabs = ref([
	{ name: "服饰", value: 1 },
	{ name: "食品", value: 2, disabled: true },
	{ name: "数码", value: 3 },
	{ name: "家居", value: 4 },
	{ name: "母婴", value: 5 },
	{ name: "美妆", value: 6 },
	{ name: "鞋品", value: 7 },
	{ name: "箱包", value: 8 },
	{ name: "钟表", value: 9 },
	{ name: "汽车", value: 10 },
	{ name: "房产", value: 11 },
	{ name: "旅游", value: 12 },
	{ name: " Electronics", value: 13 },
	{ name: "其他", value: 14 },
]);
const current = ref(3);

// 点击手动切换
function handleClick(item, index) {
	console.log('click')
	uni.showLoading({
		title: '切换等待...',
		mask: true
	});

	setTimeout(() => {
		uni.hideLoading();
		current.value = index;
	}, 2000);
}
</script>

Props

属性名	说明	类型	默认值	可选值	版本
hoverClass	同 view 的 hover-class	String	"pure-hover"	-	+1.0.0
list	数据项	Array	[]	-	+1.0.0
current	激活项下标	Number	0	-	+1.0.0
keyName	显示字段的字段名	String	name	-	+1.0.0
animation	是否开启滚动动画	Boolean	true	false	+1.0.0
scrollable	是否可以滚动	Boolean	true	false	+1.0.0
async	是否开启异步切换	Boolean	false	true	+1.0.0
shrink	收缩布局	Boolean	false	true	+1.0.0

Event

事件名	说明	回调参数	版本
itemClick	tabs 项点击事件	item: 项数据, index: 项下标	+1.0.0
change	切换事件	item: 项数据, index: 项下标	+1.0.0

Expose

方法	说明	参数	版本
init	初始化,用于因为外部数据或样式变化导致异常时重新渲染组件	-	+1.0.0

Slots

提示

京东小程序只支持默认 slot。详见上方自定义说明.

名称	说明	参数	版本
default	tabs 项	-	+1.0.0

样式变量

变量名	默认值	版本
--pure-tabs-background	var(--pure-background-element)	+1.0.0
--pure-tabs-word-break	keep-all 或 normal	+1.0.0
--pure-tabs-items-gap	-	+1.0.0
--pure-tabs-item-padding	12px	+1.0.0
--pure-tabs-item-active-background	-	+1.0.0
--pure-tabs-item-active-color	var(--pure-theme-primary)	+1.0.0
--pure-tabs-item-active-font-weight	600	+1.0.0
--pure-tabs-item-active-font-size	-	+1.0.0
--pure-tabs-item-disabled-background	-	+1.0.0
--pure-tabs-item-disabled-color	-	+1.0.0
--pure-tabs-item-disabled-font-weight	-	+1.0.0
--pure-tabs-item-disabled-font-size	-	+1.0.0
--pure-tabs-bar-bottom	0	+1.0.0
--pure-tabs-bar-z-index	4	+1.0.0
--pure-tabs-bar-width	1em	+1.0.0
--pure-tabs-bar-height	4px	+1.0.0
--pure-tabs-bar-border-radius	0px	+1.0.0
--pure-tabs-bar-background	var(--pure-theme-primary)	+1.0.0
--pure-tabs-bar-transition-duration	500ms	+1.0.0
--pure-tabs-bar-scale-x-multiple	2	+1.0.0
--pure-tabs-items-justify-content	space-between 或 flex-start	+1.0.9
--pure-tabs-item-flex	1 或 none	+1.0.0