vue-tabs-swiper

这是一个基于 hammerjs 滑动切换的 tab 选项卡，支持 vue/vue-jsx。

npm i vue-tabs-swiper -s

<vue-tabs-swiper>
    <div tab-label="热点">热点</div>
    <div tab-label="发现">发现</div>
    <div tab-label="关注">关注</div>
    // <My tab-label="我的" />
</vue-tabs-swiper>

演示

API

| 参数 | 说明 | 类型 | 默认值 | 版本 | | ------------------ | ---------------------------- | --------------- | ------------------- | ---- | | v-model | 绑定当前选中标签的下标 | Number | 0 | - | | tab-color | tab 文字颜色 | String | #484848 | - | | tab-active-color | tab 文字选中颜色 | String | #31aaff | - | | tab-font-weight | tab 字体加粗 | String, Number | - | - | | tab-font-size | tab 字体大小 | Number | - | - | | tab-slider-width | tab 选中下标记宽度 | Number | 20 | - | | tab-slider-height | tab 选中下标记高度 | Number | - | - | | border-bottom | 是否显示 header 下边线 | Boolean | false | - | | touch-animation | tab 触摸动画 | Boolean | true | - | | animation-time | 选项卡切换滑动动画过渡时间 | Number | 400 | - | | threshold | 选项卡切换滑动滑动切换的阈值 | Number | 50 | - | | un-tab-group-wiath | 当选项卡 head 无法获取宽度 | Number | window.innerWidth | - | | un-tabs-wiath | 当选项卡无法获取宽度 | Number | window.innerWidth | - | | change | 选项卡 change 事件 | Function(index) | - | - | | click | 选项卡 tab click 事件 | Function(index) | - | - | | refresh | 重新计算/渲染选项卡 | Methods | $refs.xx.refresh() | - |

说明：un-tab-group-wiath 和 un-tabs-wiath 参数，是选项卡无法获取元素宽度，因此可手动设置宽度。