alighasami/vant
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

[bugfix] Tabs：修复开启animated属性时导致的滚动问题 (#2238)

Browse Source
This commit is contained in:
张敏
2018-12-15 18:04:25 +08:00
committed by neverland
parent a94683a7e3
commit e2c4d60058
6 changed files with 118 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/tab/demo/index.vue
+13 -2
View File
@@ -92,15 +92,15 @@
<demo-block :title="$t('title8')">
<van-tabs
:active="active"
animated
class="animated-tabs"
>
<van-tab
:title="$t('tab') + index"
v-for="index in tabs"
:key="index"
>
{{ $t('content') }} {{ index }}
<div class="custom-content-wrap">{{ $t('content') }} {{ index }}</div>
</van-tab>
</van-tabs>
</demo-block>
@@ -214,5 +214,16 @@ export default {
padding: 50px 20px;
}
}
.animated-tabs {
.van-tab__pane {
padding: 0 20px;
}
}
.custom-content-wrap {
height: 60px;
line-height: 60px;
}
}
</style>
packages/tab/index.vue
+1 -9
View File
@@ -1,8 +1,6 @@
<template>
<div
v-show="parent.animated || isSelected"
:class="b('pane', { float: parent.animated })"
:style="paneStyle"
:class="b('pane', { inactive: !isSelected, active: isSelected })"
>
<slot v-if="inited" />
<div
@@ -51,12 +49,6 @@ export default create({
this.inited = this.inited || this.isSelected;
},
'parent.computedWidth'(width) {
this.paneStyle = {
width: `${width}px`
};
},
title() {
this.parent.setLine();
}
packages/tab/test/__snapshots__/demo.spec.js.snap
+44 -44
View File
@@ -10,20 +10,20 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display:none;">
<div class="van-tab__pane" style="display:none;">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -39,36 +39,36 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display:none;">
<div class="van-tab__pane" style="display:none;">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -84,16 +84,16 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display:none;">
<div class="van-tab__pane" style="display:none;">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -109,16 +109,16 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display:none;">
<div class="van-tab__pane" style="display:none;">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -134,12 +134,12 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display:none;">
<div class="van-tab__pane" style="display:none;">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -155,20 +155,20 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display:none;">
<div class="van-tab__pane" style="display:none;">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -184,8 +184,8 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display:none;">
<div class="van-tab__pane" style="display:none;">
<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;">
@@ -194,7 +194,7 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
</div>
<div class="van-tab__pane" style="display:none;">
<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;">
@@ -208,27 +208,27 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div>
<div class="van-tabs van-tabs--line">
<div class="animated-tabs 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>
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="width:0px;transition-duration:0.3s;transform:translateX(0px);display:none;">
<div class="van-tab__pane van-tab__pane--float">
<div class="van-tabs__track" style="left:0%;transition-duration:0.3s;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--float">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--float">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane van-tab__pane--float">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -244,20 +244,20 @@ exports[`renders demo correctly 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display:none;">
<div class="van-tab__pane" style="display:none;">
<div class="van-tabs__track" style="left:0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display:none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
packages/tab/test/__snapshots__/index.spec.js.snap
+32 -32
View File
@@ -8,16 +8,16 @@ exports[`change tabs data 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display: none;">
<div class="van-tab__pane" style="display: none;">
<div class="van-tabs__track" style="left: 0%;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<div><span>title2</span></div>
</div>
<div class="van-tab__pane" style="display: none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -43,16 +43,16 @@ exports[`change tabs data 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display: none;">
<div class="van-tab__pane" style="">
<div class="van-tabs__track" style="left: 0%;">
<div class="van-tab__pane van-tab__pane--active">
<!---->
<!---->
</div>
<div class="van-tab__pane" style="display: none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<div><span>title2</span></div>
</div>
<div class="van-tab__pane" style="display: none;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -78,14 +78,14 @@ exports[`click to switch tab 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display: none;">
<div class="van-tab__pane" style="width: 0px;">Text
<div class="van-tabs__track" style="left: 0%;">
<div class="van-tab__pane van-tab__pane--active">Text
<!---->
</div>
<div class="van-tab__pane" style="display: none; width: 0px;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
</div>
<div class="van-tab__pane" style="display: none; width: 0px;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -111,14 +111,14 @@ exports[`click to switch tab 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display: none;">
<div class="van-tab__pane" style="width: 0px; display: none;">Text
<div class="van-tabs__track" style="left: -100%;">
<div class="van-tab__pane van-tab__pane--inactive">Text
<!---->
</div>
<div class="van-tab__pane" style="width: 0px;">
<div class="van-tab__pane van-tab__pane--active">
Text
</div>
<div class="van-tab__pane" style="display: none; width: 0px;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -144,14 +144,14 @@ exports[`swipe to switch tab 1`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display: none;">
<div class="van-tab__pane" style="width: 0px;">Text
<div class="van-tabs__track" style="left: 0%;">
<div class="van-tab__pane van-tab__pane--active">Text
<!---->
</div>
<div class="van-tab__pane" style="display: none; width: 0px;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
</div>
<div class="van-tab__pane" style="display: none; width: 0px;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -177,14 +177,14 @@ exports[`swipe to switch tab 2`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display: none;">
<div class="van-tab__pane" style="width: 0px; display: none;">Text
<div class="van-tabs__track" style="left: -100%;">
<div class="van-tab__pane van-tab__pane--inactive">Text
<!---->
</div>
<div class="van-tab__pane" style="width: 0px;">
<div class="van-tab__pane van-tab__pane--active">
Text
</div>
<div class="van-tab__pane" style="display: none; width: 0px;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -210,14 +210,14 @@ exports[`swipe to switch tab 3`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display: none;">
<div class="van-tab__pane" style="width: 0px; display: none;">Text
<div class="van-tabs__track" style="left: -100%;">
<div class="van-tab__pane van-tab__pane--inactive">Text
<!---->
</div>
<div class="van-tab__pane" style="width: 0px;">
<div class="van-tab__pane van-tab__pane--active">
Text
</div>
<div class="van-tab__pane" style="display: none; width: 0px;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>
@@ -243,14 +243,14 @@ exports[`swipe to switch tab 4`] = `
</div>
</div>
<div class="van-tabs__content">
<div class="van-tabs__track" style="display: none;">
<div class="van-tab__pane" style="width: 0px;">Text
<div class="van-tabs__track" style="left: 0%;">
<div class="van-tab__pane van-tab__pane--active">Text
<!---->
</div>
<div class="van-tab__pane" style="width: 0px; display: none;">
<div class="van-tab__pane van-tab__pane--inactive">
Text
</div>
<div class="van-tab__pane" style="display: none; width: 0px;">
<div class="van-tab__pane van-tab__pane--inactive">
<!---->
<!---->
</div>