更新记录
1.0.3(2024-03-19) 下载此版本
修复可能存在的样式问题
1.0.2(2023-06-26) 下载此版本
1.0.2
1.0.1(2023-06-26) 下载此版本
1.0.1
查看更多平台兼容性
uni-app
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
× | √ | √ | √ | √ | √ | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | √ | √ | √ | - | - | - | √ | - | √ | √ |
其他
多语言 | 暗黑模式 | 宽屏模式 |
---|---|---|
× | × | √ |
## 介绍
主要功能为vue3版本的可滑动,超出可自动滚动的tab选项卡
样式自定义需要开发者自己通过外部样式进行重写

使用方法
下面的两个参数都是必传的
参数 | 类型 | 默认值 | 是否必传 | 说明 |
---|---|---|---|---|
tabList | Array | [] | 是 | 选项卡数据 |
modelValue | Number | 0 | 是 | 双向绑定的数据,选中的选项卡id,试用v-model传入 |
valueKey | String | value | 否 | 选项卡value,字段可自定义传入 |
labelKey | String | label | 否 | 选项卡名称,字段可自定义传入 |
iconKey | String | '' | 否 | 选项卡图标 |
在需要调用的页面
复制代码<template>
<view>
<auto-tabs :tabList="tabList" v-model="currentTabId" />
</view>
</template>
<script setup>
import { ref, computed, watch } from 'vue'
const currentTabId = ref(0)
const tabList = ref([
{
value: 1,
label: '男装'
},
{
value: 2,
label: '女装'
},
{
value: 3,
label: '童装'
},
{
value: 4,
label: '鞋子'
},
{
value: 5,
label: '配饰'
}
])
</script>