更新记录

0.0.9(2022-06-23)

1.修复在nvue中,底部line不展示的问题。
2.修复在nvue中,若tabs数量未铺满全屏,居右显示的问题。

0.0.8(2022-06-12)

1.新增bar-widthbar-height,支持自定义滑块宽高。
2.修复在一些情况下,同步覆盖list时可能出现的滑块滚动位置不正确的问题。

查看更多

平台兼容性

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

z-tabs

version license


反馈qq群(点击加群):790460711


z-tabs文档

props

参数 说明 类型 默认值 可选值
list 数据源数组,支持形如['tab1','tab2']的格式或[{name:'tab1',value:1}]的格式 Array [] -
current 当前选中的index Number|String 0 -
scroll-count list数组长度超过scrollCount时滚动显示(不自动铺满全屏) Number|String 5 -
tab-width 自定义每个tab的宽度,默认为0,即代表根据内容自动撑开,单位为rpx Number|String 0 0
bar-width 滑块宽度,单位rpx Number|String 45 -
bar-height 滑块高度,单位rpx Number|String 8 -
name-key list中item的name(标题)的key String name -
value-key list中item的value的key String value -
active-color 激活状态tab的颜色 String #007AFF -
inactive-color 未激活状态tab的颜色 String #888888 -
active-style 激活状态tab的样式 Object {} -
inactive-style 未激活状态tab的样式 Object {} -
bg-color tabs背景色 String white -
init-trigger-change 初始化时是否自动触发change事件 Boolean true false

events

事件名 说明 回调参数
@change tabs改变(点击)时触发 参数1:index(当前切换到的index);
参数2:value(当前切换到的value)

slots

名称 说明
left tabs左侧插槽
right tabs右侧插槽

支持全局配置

  • /z-tabs/components/z-tabs/config/index.js文件中进行配置
export default {
    'active-color': 'red'
}

隐私、权限声明

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

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

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

许可协议

MIT协议

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