更新记录

1.0.4.1（2023-11-03）

更新插件描述

1.0.4（2023-11-03）

更新文档

1.0.3（2023-11-03）

更新示例截图

平台兼容性

zm-tabs 标签页

内容组之间进行导航切换。

特点

tab超出自动滚动,支持当前选中tab居中展示,支持选中颜色,字体大小自定义,支持下划线跟随内容大小

示例

<template>
    <view class="content">
        <view class="title">基础用法</view>
        <zm-tabs :activeKey="activeKeyStr" @change="changeKey" :list="list"></zm-tabs>
        <view class="title">下划线长度填满选项</view>
        <zm-tabs :activeKey="activeKeyStr" @change="changeKey" activeLineMode='full' :list="list"></zm-tabs>
        <view class="title">自定义下划线高度 字体大小颜色</view>
        <zm-tabs :activeKey="activeKeyStr" :style="{
            '--active-line-color' : 'red',
            '--active-line-height':'4px',
            '--active-title-color':'orange',
            '--title-font-size':'22px'
        }" @change="changeKey" :list="list"></zm-tabs>

    </view>
</template>

<script>
    export default {
        data() {
            return {
                title: 'Hello',
                key:0,
                list:['orange','apple','mango','香蕉','柚子','西瓜',"常超文字展示常超文字展示"].map((item, index) => ({
                    title: item,
                    key: `${index}`,
                    // disabled: index % 2 == 0
                })),

                activeKeyStr:'0',

            }
        },

        methods: {

            changeKey(e){
                this.activeKeyStr = e;

            }
        }
    }
</script>

<style>

    .title {
        margin: 10px 0;
        text-align: left;
        padding-left: 20px;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

属性

CSS 变量

ITabItem接口