更新记录

1.0.0.1（2025-12-30） 下载此版本

master

1.0.0.2（2025-12-30） 下载此版本

master

平台兼容性

uni-app(4.13)

其他

安装

在市场导入xf-tabuni_modules版本的即可，无需import

组件关联说明

• xf-scss辅助样式;
• xf-icon;
• xf-pk-single-select;

代码演示

基本用法

• 使用组件代码如下：

<template>
    <view>
        <xf-tab :tabs="tabs10" customClass="b-mt16" v-model="current10" :scroll="false"></xf-tab>
        <xf-tab :tabs="tabs11" customClass="b-mt16" v-model="current11" :scroll="true" @change="changeTab"></xf-tab>

        <xf-tab :tabs="tabs20" customClass="b-mt16" v-model="current20" gridType="second" :scroll="false"
            @change="changeTab"></xf-tab>
        <xf-tab :tabs="tabs21" customClass="b-mt16" v-model="current21" gridType="second" :scroll="true"
            @change="changeTab"></xf-tab>

        <xf-tab :tabs="tabs30" customClass="b-mt16" v-model="current30" gridType="third" :scroll="false"
            @change="changeTab"></xf-tab>
        <xf-tab :tabs="tabs31" customClass="b-mt16" v-model="current31" gridType="third" :scroll="true"
            @change="changeTab"></xf-tab>
    </view>
</template>

• ts 基础用法：

<script lang="ts" setup>
    import { ref } from 'vue';

    const tabs10 = [{
        name: '一级标题选择',
    }, {
        name: '一级标题选择',
    }, {
        name: '一级标题选择',
    }]
    const current10 = ref(0)

    const tabs11 = [{
        name: '一级标题选择标题选择',
    }, {
        name: '一级标题选择标题选择标题选择',
    }, {
        name: '一级标题',
    }, {
        name: '一级标',
    }, {
        name: '一级标题选择题选择标题选择标题选择',
    },]
    const current11 = ref(2)

    const tabs20 = [{
        name: '二级标题选择',
    }, {
        name: '二级标题选择',
    }, {
        name: '二级标题选择',
    }]
    const current20 = ref(0)

    const tabs21 = [{
        name: '二级标题选择',
    }, {
        name: '二级标题选择',
    }, {
        name: '二级标题选择',
    }, {
        name: '二级标题选择',
    }, {
        name: '二级标题选择',
    },]
    const current21 = ref(0)

    const tabs30 = [{
        name: '三级标题选择',
    }, {
        name: '三级标题选择',
    }, {
        name: '三级标题选择',
    }]
    const current30 = ref(0)

    const tabs31 = [{
        name: '三级标题选择',
    }, {
        name: '三级标题选择',
    }, {
        name: '三级标题选择',
    }, {
        name: '三级标题选择',
    }, {
        name: '三级标题选择',
    }, {
        name: '三级选择',
    },]
    const current31 = ref(0)

    const changeTab = (e) => {

    }
</script>

• 自定义用法：

<template>
    <view>
        <xf-tab :tabs="tabs10" customClass="b-mt16" v-model="current10" :scroll="false" 
            baseColor="#FFF000" activeColor="#FF0000" :fontSize="18"></xf-tab>
        <xf-tab :tabs="tabs20" customClass="b-mt16" v-model="current20" gridType="second" :scroll="false"
            @change="changeTab" baseColor="#FFF000" activeColor="#FF0000" :fontSize="16"></xf-tab>
        <xf-tab :tabs="tabs30" customClass="b-mt16" v-model="current30" gridType="third" :scroll="false"
            @change="changeTab" baseColor="#FFF000" activeColor="#FF0000" :fontSize="14"></xf-tab>
    </view>
</template>

API

Props

事件 Emits