vue组件,多容器tab,位置保持,侧滑,基于better-scroll,多tab滚动容器<br>
npm install multi-tab多tab滚动容器,基于better-scroll实现,支持位置保持,侧滑切tab,tab自动吸顶等功能。
slot="header"
style="height:150px;background:#a8a8a8;position:sticky;top:0; display:flex;justify-content: center;align-items: center;"
>
header区域
import MultiTab from 'multi-tab'
export default {
components: {
'multi-tab': MultiTab
}
}
`
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | -------------------- | -------------- | -------------------------- | -------------------- |
| v-model | 当前选中的tab下标 | Number | -- | 0 |
| tabList | tabs数组 | Array | -- | [] |
| isSticky | 自动吸顶 | Boolean | -- | true |
| tidy | 吸顶的前提下,开启 上滑自动隐藏tab,下滑自动展示tab功能。 | Boolean | -- | false |
| stickyTop | 吸顶距离 | Number | -- | 0 |
this.bsBody.updateHeight();`Events
| 事件名称 | 说明 | 回调参数 |
| --------------- | -------------------------------------- | -------------------------------- |
| click | 点击tab触发 | index |
Scoped Slot
| name | 说明 |
| --------- | --------------------------------------------------------------------------------------------------- |
| header | tab以上部分的slot, eg:
|
| nav | 自定义的nav, eg: |
| ${index} | 0-n, 嵌入每一页, eg: `"> `` |