更新记录
1.0.2(2022-11-02) 下载此版本
1.兼容微信端 2.更新为uni_modules插件
1.0.1(2021-11-05) 下载此版本
1.添加是否显示下划线属性和下划线颜色属性 2.添加文字未选中颜色属性和文字选中颜色属性
1.0.0(2021-10-29) 下载此版本
tab组件 1.0.0
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
特殊说明
只测试了H5和微信小程序,其它平台未测试
文档说明
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
tabItem | Array | - | tab列表 |
tabIndex | Number | - | 当前选中下标 |
isLine | Boolen | true | 是否显示下划线 |
textColor | String | '#333333' | 文字颜色 |
lineColor | String | '1DA8FD' | 下划线颜色 |
activeColor | String | '1DA8FD' | 文字选中颜色 |
@tabClick | Function | - | 点击事件 |
代码示例
- html部分
<htzzhl-tab :tabItem="tabItem" :tabIndex="tabIndex" @tabClick="tabClick" textColor="#999"></htzzhl-tab>
- js部分
<script>
export default {
data() {
return {
tabItem: ['战争学院', '德玛西亚', '艾欧尼亚'],
tabIndex: 0
}
},
methods: {
tabClick(e) {
this.tabIndex = e
console.log(`当前切换下标是${this.tabIndex}`)
},
}
}
</script>