blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-05 19:41:42 +08:00
Code Issues Projects Releases Wiki Activity

[improvement] Tab: optimize animated tab (#2302)

Browse Source
This commit is contained in:
neverland 2018-12-16 15:18:14 +08:00 committed by GitHub
parent e2c4d60058
commit 347e980da9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 211 additions and 271 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/tab/demo/index.vue
View File

@ -93,14 +93,13 @@
<demo-block :title="$t('title8')">
<van-tabs
animated
class="animated-tabs"
>
<van-tab
:title="$t('tab') + index"
v-for="index in tabs"
:key="index"
>
<div class="custom-content-wrap">{{ $t('content') }} {{ index }}</div>
{{ $t('content') }} {{ index }}
</van-tab>
</van-tabs>
</demo-block>
@ -214,16 +213,5 @@ export default {
padding: 50px 20px;
}
}
.animated-tabs {
.van-tab__pane {
padding: 0 20px;
}
}
.custom-content-wrap {
height: 60px;
line-height: 60px;
}
}
</style>

6
packages/tab/index.vue
View File

@ -1,6 +1,7 @@
<template>
<div
:class="b('pane', { inactive: !isSelected, active: isSelected })"
v-show="isSelected || parent.animated"
:class="b('pane')"
>
<slot v-if="inited" />
<div
@ -29,8 +30,7 @@ export default create({
data() {
return {
inited: false,
paneStyle: {}
inited: false
};
},

262
packages/tab/test/__snapshots__/demo.spec.js.snap
View File

@ -10,23 +10,21 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@ -39,39 +37,37 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@ -84,19 +80,17 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@ -109,19 +103,17 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@ -134,15 +126,13 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@ -155,23 +145,21 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>
@ -184,23 +172,21 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>标签
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>标签
</div>
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>标签
</div>
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<div>
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
<!---->
<!----></i>标签
</div>
</div>
</div>
@ -208,7 +194,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="animated-tabs van-tabs van-tabs--line">
<div class="van-tabs van-tabs--line">
<div class="van-tabs__wrap van-hairline--top-bottom">
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
<div class="van-tabs__line"></div>
@ -216,19 +202,19 @@ exports[`renders demo correctly 1`] = `
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;transition-duration:0.3s;">
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<div class="van-tab__pane">
<!---->
<!---->
</div>
@ -244,23 +230,21 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<!---->
<!---->
</div>
</div>
</div>

168
packages/tab/test/__snapshots__/index.spec.js.snap
View File

@ -8,19 +8,17 @@ exports[`change tabs data 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left: 0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<div><span>title2</span></div>
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<div><span>title2</span></div>
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
</div>
</div>
@ -43,19 +41,17 @@ exports[`change tabs data 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left: 0%;">
<div class="van-tab__pane van-tab__pane--active">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<div><span>title2</span></div>
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<div><span>title2</span></div>
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
</div>
</div>
@ -78,17 +74,15 @@ exports[`click to switch tab 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left: 0%;">
<div class="van-tab__pane van-tab__pane--active">Text
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="">Text
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
</div>
</div>
@ -111,17 +105,15 @@ exports[`click to switch tab 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left: -100%;">
<div class="van-tab__pane van-tab__pane--inactive">Text
<!---->
</div>
<div class="van-tab__pane van-tab__pane--active">
Text
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">Text
<!---->
</div>
<div class="van-tab__pane" style="">
Text
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
</div>
</div>
@ -144,17 +136,15 @@ exports[`swipe to switch tab 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left: 0%;">
<div class="van-tab__pane van-tab__pane--active">Text
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="">Text
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
</div>
</div>
@ -177,17 +167,15 @@ exports[`swipe to switch tab 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left: -100%;">
<div class="van-tab__pane van-tab__pane--inactive">Text
<!---->
</div>
<div class="van-tab__pane van-tab__pane--active">
Text
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">Text
<!---->
</div>
<div class="van-tab__pane" style="">
Text
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
</div>
</div>
@ -210,17 +198,15 @@ exports[`swipe to switch tab 3`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left: -100%;">
<div class="van-tab__pane van-tab__pane--inactive">Text
<!---->
</div>
<div class="van-tab__pane van-tab__pane--active">
Text
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">Text
<!---->
</div>
<div class="van-tab__pane" style="">
Text
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
</div>
</div>
@ -243,17 +229,15 @@ exports[`swipe to switch tab 4`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="left: 0%;">
<div class="van-tab__pane van-tab__pane--active">Text
<!---->
</div>
<div class="van-tab__pane van-tab__pane--inactive">
Text
</div>
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="">Text
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
Text
</div>
<div class="van-tab__pane" style="display: none;">
<!---->
<!---->
</div>
</div>
</div>

12
packages/tabs/index.less
View File

@ -148,17 +148,7 @@
.van-tab__pane {
width: 100%;
box-sizing: border-box;
flex-shrink: 0;
overflow-y: auto;
&--inactive {
height: 0;
overflow: visible;
}
&--active {
height: auto;
}
box-sizing: border-box;
}
}

20
packages/tabs/index.vue
View File

@ -44,11 +44,13 @@
:class="b('content')"
>
<div
v-if="animated"
:class="b('track')"
:style="trackStyle"
>
<slot />
</div>
<slot v-else />
</div>
</div>
</template>
@ -145,20 +147,12 @@ export default create({
},
trackStyle() {
const {
curActive,
animated
} = this;
const trackStyle = {
left: `${-1 * curActive * 100}%`
};
if (animated) {
trackStyle.transitionDuration = `${this.duration}s`;
if (this.animated) {
return {
left: `${-1 * this.curActive * 100}%`,
transitionDuration: `${this.duration}s`
};
}
return trackStyle;
}
},