[new feature] Tab support sticky (#382)

This commit is contained in:
neverland
2017-12-06 14:19:08 +08:00
committed by GitHub
parent beb3ed141d
commit 80c2fdc18f
7 changed files with 148 additions and 33 deletions
+14 -2
View File
@@ -39,6 +39,14 @@
</van-tab>
</van-tabs>
</demo-block>
<demo-block :title="$t('title6')">
<van-tabs :active="active" sticky>
<van-tab :title="$t('tab') + index" v-for="index in tabs" :key="index">
{{ $t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
</demo-section>
</template>
@@ -50,7 +58,8 @@ export default {
title2: '横向滚动',
title3: '禁用标签',
title4: '样式风格',
title5: '点击事件'
title5: '点击事件',
title6: '粘性布局'
},
'en-US': {
tab: 'Tab ',
@@ -58,7 +67,8 @@ export default {
title2: 'Swipe Tabs',
title3: 'Disabled Tab',
title4: 'Card Style',
title5: 'Click Event'
title5: 'Click Event',
title6: 'Sticky'
}
},
@@ -89,6 +99,8 @@ export default {
<style lang="postcss">
.demo-tab {
margin-bottom: 1000px;
.van-tab__pane {
background-color: #fff;
padding: 20px;
+11
View File
@@ -100,6 +100,17 @@ export default {
};
```
#### Sticky
In sticky mode, the tab will be fixed to top when scroll to top
```html
<van-tabs :active="active" sticky>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
```
### Tabs API
| Attribute | Description | Type | Default | Accepted Values |
+14 -2
View File
@@ -100,14 +100,26 @@ export default {
};
```
#### 粘性布局
通过`sticky`属性可以开启粘性布局,粘性布局下,当 Tab 滚动到顶部时会自动吸顶
```html
<van-tabs :active="active" sticky>
<van-tab v-for="index in 4" :title="'选项 ' + index">
内容 {{ index }}
</van-tab>
</van-tabs>
```
### Tabs API
| 参数 | 说明 | 类型 | 默认值 | 可选 |
|-----------|-----------|-----------|-------------|-------------|
| type | Tab 样式类型 | `String` | `line` | `card` |
| active | 默认激活的 tab | `String` `Number` | `0` | - |
| duration | 切换 tab 的动画时间 | `Number` | `0.2` | - | - |
| swipeThreshold | 滚动阀值,设置 Tab 超过多少个可滚动 | `Number` | `4` | - | - |
| duration | 切换 tab 的动画时间 | `Number` | `0.2` | - |
| swipeThreshold | 滚动阀值,设置 Tab 超过多少个可滚动 | `Number` | `4` | - |
| sticky | 是否使用粘性定位布局 | `Boolean` | `false` | - |
### Tab API