Skip to content

Commit

Permalink
[bugfix] Tabs：修复开启animated属性时导致的滚动问题 (#2238)
Browse files Browse the repository at this point in the history
  • Loading branch information
@cookfront @chenjiahan
cookfront authored and chenjiahan committed Dec 15, 2018
1 parent a94683a commit e2c4d60
Show file tree
Hide file tree
Showing 6 changed files with 118 additions and 109 deletions.
15 changes: 13 additions & 2 deletions packages/tab/demo/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
10 changes: 1 addition & 9 deletions packages/tab/index.vue
View file
Original file line number Diff line number Diff line change
@@ -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
Expand Down Expand Up @@ -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();
}
Expand Down
88 changes: 44 additions & 44 deletions packages/tab/test/__snapshots__/demo.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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;">
Expand All @@ -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;">
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit e2c4d60

Please sign in to comment.