更新记录

1.0.1（2025-11-18） 下载此版本

更正了插件名称及调用方式

1.0.0（2025-11-18） 下载此版本

初次版本

平台兼容性

uni-app(4.08)

uni-app x(4.08)

其他

zmt-labels 选项卡插件

简介

zmt-labels 是一个基于 UniApp 开发的三选项卡切换插件，包含"参数规格"、"技术说明"、"应用举例"三个固定选项卡，点击对应的选项，底部会显示对应的内容，内容高度自适应。

功能特点

• 三个固定选项卡：参数规格、技术说明、应用举例
• 点击选项卡标题切换对应内容区域
• 内容区域高度自适应，根据内容多少自动调整
• 平滑切换动画效果，提升用户体验
• 支持自定义样式

安装方式

将插件文件夹 zmt-label 复制到项目的 uni_modules 目录下即可。

使用方法

1. 直接使用，无需引入

<view class="detail-labels left clearfix">
    <zmt-labels :tabs="tabs"></zmt-labels>
</view>

tabs数据

data() {
    return {
        data:{},
        tabs:[
            {
                title:'参数规格',
                content:'参数规格内容'
            },
            {
                title:'技术说明',
                content:'技术说明内容'
            },
            {
                title:'应用举例',
                content:'应用举例内容'
            }
        ]
    }
},

自定义样式

组件支持自定义样式，可以通过覆盖以下 CSS 类来实现：

• .zmt-label-container: 组件容器
• .zmt-label-tabs: 选项卡标题栏
• .zmt-label-tab: 单个选项卡标题
• .zmt-label-tab.active: 选中状态的选项卡标题
• .zmt-label-content: 内容区域
• .zmt-label-panel: 单个内容面板
• .zmt-label-panel.active: 显示状态的内容面板

平台支持

支持 H5、小程序（微信、支付宝、百度、头条、QQ）、App 等平台。

版本历史

• v1.0.0: 初始版本，实现基本功能