blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

[new feature]: tabs component add swipeThreshold prop (#206)

Browse Source
This commit is contained in:
张敏 2017-10-12 22:52:13 -05:00 committed by GitHub
parent f019b75b04
commit f9fa2fc1c3
2 changed files with 11 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
docs/examples-docs/zh-CN/tab.md
View File

@ -89,7 +89,7 @@ Vue.component(Tabs.name, Tabs);
``` ```
::: :::
### 设置切换tab的动画时间 #### 设置切换tab的动画时间
通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。 通过设置`duration`来指定时间，默认为0.3s，只接受`Number`类型参数。
@ -103,11 +103,11 @@ Vue.component(Tabs.name, Tabs);
``` ```
::: :::
#### 多于4个tab时 #### 横向滚动tab
多于4个tab时，可以横向滚动tab。 默认情况下多于4个tab时，可以横向滚动tab。可以通过设置`swipeThreshold`这个阙值，多于这个阙值时，tab就会支持横向滚动。
:::demo 多于4个tab时 :::demo 横向滚动tab
```html ```html
<van-tabs> <van-tabs>
<van-tab title="选项一">内容一</van-tab> <van-tab title="选项一">内容一</van-tab>

10
packages/tabs/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="van-tabs" :class="[`van-tabs--${type}`]"> <div class="van-tabs" :class="[`van-tabs--${type}`]">
<div class="van-tabs__nav-wrap" v-if="type === 'line' && tabs.length > 4"> <div class="van-tabs__nav-wrap" v-if="type === 'line' && tabs.length > swipeThreshold">
<div class="van-tabs__swipe" ref="swipe"> <div class="van-tabs__swipe" ref="swipe">
<div class="van-tabs__nav van-tabs__nav--line"> <div class="van-tabs__nav van-tabs__nav--line">
<div class="van-tabs__nav-bar" :style="navBarStyle"></div> <div class="van-tabs__nav-bar" :style="navBarStyle"></div>
@ -62,6 +62,10 @@
duration: { duration: {
type: Number, type: Number,
default: 0.3 default: 0.3
},
swipeThreshold: {
type: Number,
default: 4
} }
}, },
@ -81,7 +85,7 @@
curActive() { curActive() {
/* istanbul ignore else */ /* istanbul ignore else */
if (this.tabs.length > 4) { if (this.tabs.length > this.swipeThreshold) {
this.doOnValueChange(); this.doOnValueChange();
} }
} }
@ -127,7 +131,7 @@
this.isReady = true; this.isReady = true;
this.initEvents(); this.initEvents();
if (this.tabs.length > 4) { if (this.tabs.length > this.swipeThreshold) {
this.doOnValueChange(); this.doOnValueChange();
} }
}); });