更新记录

1.0.0（2024-08-22） 下载此版本

首次发布

平台兼容性

zero-tabs 组件

使用方法

符合easycom组件模式,使用 uni_modules 导入直接使用即可

参数说明

capsuleOptions(胶囊模式配置项)

| 参数 | 类型 | 默认值 | 说明 | |height | Number | - | 自定义胶囊高度 | |radius | Number | - | 自定义胶囊圆角 | |color | Number | '#0396FF' | 自定义胶囊颜色 |

emits

使用示例

<template>
    <view class="tabs">
        <div class="zero-nav-title">基础使用</div>
        <!-- <div class="section"> -->
        <zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange" />
        <!-- </div> -->
        <div class="zero-nav-title">胶囊模式(需要自定义selectColor)</div>
        <div class="section">
            <zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange" slider="capsule"
                selectColor="#ffffff" />
        </div>
        <div class="zero-nav-title">无滑块</div>
        <div class="section">
            <zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange" slider="none" />
        </div>
        <div class="zero-nav-title">自定义颜色</div>
        <div class="section">
            <zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange"
                selectColor="#465CFF" defaultColor="#999999" />
        </div>
        <div class="zero-nav-title">自定义背景色</div>
        <div class="section">
            <zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange"
                backgroundColor="#eeeeee" />
        </div>

        <div class="zero-nav-title">禁用选项</div>
        <div class="section">
            <zero-tabs :currentIndex="currentIndex" :tabs="categoryList" @change="handleTabsChange"
                backgroundColor="#eeeeee" />
        </div>
    </view>
</template>

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

const handleTabsChange = (index: number) => {
    currentIndex.value = index;
};
const currentIndex = ref(0);
const categoryList = ref([
    { name: "推荐" },
    { name: "手机数码" },
    { name: "家用电器", disabled: true },
    { name: "电脑办公" },
    { name: "家居家装" },
    { name: "美妆个护" },
    { name: "服饰鞋包" },
    { name: "母婴童装" },
    { name: "图书音像" },
    { name: "房产汽车" },
    { name: "生鲜水果" },
    { name: "其他" },
]);

</script>

<style lang="scss" scoped>
.tabs {}

.zero-nav-title {
    margin: 50rpx 0 20rpx 20rpx;
}
</style>

插件预览:

小程序搜索: zerojs 零技术

预览的小程序不一定能及时更新当前插件