更新记录

1.0.3(2022-10-18)

修复已知问题

1.0.2(2022-09-18)

  • 添加示例工程

1.0.1(2022-09-18)

  • 调整为uni_modules
查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.1.0 app-vue ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari

Tab

tabs组件,组件名:l-tabs

使用方式

template 中使用组件

基本用法

    <l-tabs :list="tabsList1"></l-tabs>

基本用法.gif

    <!-- 传入对象  控制初始选中-->
    <l-tabs :list="tabsList2" keyName="name" v-model="active"></l-tabs>

传入对象,控制初始选中.gif

    <!--  带有下划线 -->
    <l-tabs :list="tabsList1" :lineShow="true" lineColor="#e9392f" :lineScale="1.2"></l-tabs>

带有下划线.gif

    <!-- 靠左排列  自定义选中文字颜色及大小  自定义下划线样式-->
        <l-tabs
            :list="TabsList"
            activeTextColor="#333"
            layout="left"
            keyName="name"
            :lineShow="true"
            :lineCrude="6"
            :activeSize="16"
            linePlace="26px"
            lineColor="linear-gradient(to right, #e9392f 30%, #f2d6d6)"
        ></l-tabs>

靠左排列,样式自定义.gif

        <!-- tab标签过多 可滚动排列 -->
        <l-tabs :list="TabsList1" layout="scroll" keyName="name"></l-tabs>

可滚动排列.gif

        <!-- 分割线 -->
        <l-tabs :list="tabsList2" :splitLine="true"  keyName="name"></l-tabs>

分割线.gif

    export default {
        data() {
            return {
                        active:2,
                        tabsList1:['产品', '前端开发', '美工', '后端开发'],
                        tabsList2: [{ name: '产品' }, { name: '前端开发' }, { name: '美工' }, { name: '后端开发' }],
                    }

            }
    }

属性说明

属性名 类型 默认值 说明
list array [] tab数据列表(可传数组对象)
value number 0 ( v-model)选中的index 不传下标从0开始
keyName strig '' 当list 传数组对象时,展示文字的键名
layout strig 'equal' tab 排列方式
left‘ | 'equal' | 'scroll' 靠左 均分 滚动
tabWidth number 375 tab 宽度撑满屏幕即为375 组件内部转为100vw
size number 14 非选中字体大小
activeSize number 14 选中状态字体大小
textColor string '#333' 非选中字体颜色
activeTextColor string '#E9392F' 选中状态字体颜色
bold number|string 400 选中状态字体粗细(400|500 |600|bold)
labelPadding number 5 tabItem的左右padding
bk string '#FFF' tab 整体 的颜色
fixed boolean true tab 是否固定 (吸顶常用)

下划线

属性名 类型 默认值 说明
lineShow boolean true 下划线是否显示
lineScale number 1 下划线长度(伸缩比例),默认等于字体长度
lineColor string '#333' 下划线颜色
linePlace string '35px' 下划线位置
lineCrude string 2 下划线粗细

分割线

属性名 类型 默认值 说明
splitLine boolean true 分割线是否显示(大于两个生效)
slineColor string '#eee' 下划线颜色

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问