multi-tab

v1.0.2

vue组件，多容器tab，位置保持，侧滑，基于better-scroll，多tab滚动容器<br>

multi-tab tab scroll 多容器tab vue 位置保持多tab滚动容器

0/weekUpdated 3 years agoISCUnpacked: 126.9 MB

Published by lizhuang

npm install multi-tab

Repository Homepage npm

多tab滚动容器，基于better-scroll实现，支持位置保持，侧滑切tab，tab自动吸顶等功能。

在线演示

http://39.98.139.162:3001/demo
![](./zaixianyulan.jpg)

本地运行

1. git clone
2. yarn install
3. yarn dev
4. 0.0.0.0:8000

说明

基于better-scroll实现。
只接入了上拉加载更多的功能，需要更多功能请看 https://better-scroll.github.io/docs/zh-CN/plugins/

接入

npm i multi-tab --save 或 yarn add multi-tab -S
``



      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 } }`

`参考demo`


src/library/components/multiTab/demo
Attributes
| 参数            | 说明        | 类型           | 可选值      | 默认值               |
| ------------ | -------------------- | -------------- | -------------------------- | -------------------- |
| v-model        | 当前选中的tab下标 | Number        | --         | 0                |
| tabList        | tabs数组 | Array        | --         | []                |
| isSticky        | 自动吸顶 | Boolean        | --         | true                |
| tidy        | 吸顶的前提下，开启 上滑自动隐藏tab，下滑自动展示tab功能。 | Boolean        | --         | false                |
| stickyTop        | 吸顶距离 | Number        | --         | 0                |
   
方法

将bsBody挂载到了Vue，子组件可之间this.bsBody使用。
Vue.prototype.bsBody = this.bsBody;
【注意】当tab页高度变化时，请调用

`this.bsBody.updateHeight();`


Events
| 事件名称        | 说明                                   | 回调参数                         |
| --------------- | -------------------------------------- | -------------------------------- |
| click        | 点击tab触发                       | index |
Scoped Slot

| name | 说明 | | --------- | --------------------------------------------------------------------------------------------------- | | header | tab以上部分的slot， eg：

HEADER

 |
| nav | 自定义的nav， eg：

                               |
| ${index}   | 0-n, 嵌入每一页， eg：

`">`` |

参考

https://juejin.cn/post/7008356543444254757
https://market.m.taobao.com/app/idleFish-F2e/mini-3c/home.html

参考demo

src/library/components/multiTab/demo

Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | -------------------- | -------------- | -------------------------- | -------------------- |
| v-model | 当前选中的tab下标 | Number | -- | 0 |
| tabList | tabs数组 | Array | -- | [] |
| isSticky | 自动吸顶 | Boolean | -- | true |
| tidy | 吸顶的前提下，开启上滑自动隐藏tab，下滑自动展示tab功能。 | Boolean | -- | false |
| stickyTop | 吸顶距离 | Number | -- | 0 |

方法

将bsBody挂载到了Vue，子组件可之间this.bsBody使用。
Vue.prototype.bsBody = this.bsBody;
【注意】当tab页高度变化时，请调用

this.bsBody.updateHeight();

Events

| 事件名称 | 说明 | 回调参数 |
| --------------- | -------------------------------------- | -------------------------------- |
| click | 点击tab触发 | index |

Scoped Slot

| name      | 说明                                                                                                |
| --------- | --------------------------------------------------------------------------------------------------- |
| header   | tab以上部分的slot， eg：

HEADER

|
| nav | 自定义的nav， eg：

|
| ${index} | 0-n, 嵌入每一页， eg：