mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[bugfix] Tabs：修复开启animated属性时导致的滚动问题 (#2238)
This commit is contained in:
张敏
neverland
parent
a94683a7e3
commit
e2c4d60058
@ -92,15 +92,15 @@
|
|||||||
|
|
||||||
<demo-block :title="$t('title8')">
|
<demo-block :title="$t('title8')">
|
||||||
<van-tabs
|
<van-tabs
|
||||||
:active="active"
|
|
||||||
animated
|
animated
|
||||||
|
class="animated-tabs"
|
||||||
>
|
>
|
||||||
<van-tab
|
<van-tab
|
||||||
:title="$t('tab') + index"
|
:title="$t('tab') + index"
|
||||||
v-for="index in tabs"
|
v-for="index in tabs"
|
||||||
:key="index"
|
:key="index"
|
||||||
>
|
>
|
||||||
{{ $t('content') }} {{ index }}
|
<div class="custom-content-wrap">{{ $t('content') }} {{ index }}</div>
|
||||||
</van-tab>
|
</van-tab>
|
||||||
</van-tabs>
|
</van-tabs>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
@ -214,5 +214,16 @@ export default {
|
|||||||
padding: 50px 20px;
|
padding: 50px 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.animated-tabs {
|
||||||
|
.van-tab__pane {
|
||||||
|
padding: 0 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-content-wrap {
|
||||||
|
height: 60px;
|
||||||
|
line-height: 60px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -1,8 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-show="parent.animated || isSelected"
|
:class="b('pane', { inactive: !isSelected, active: isSelected })"
|
||||||
:class="b('pane', { float: parent.animated })"
|
|
||||||
:style="paneStyle"
|
|
||||||
>
|
>
|
||||||
<slot v-if="inited" />
|
<slot v-if="inited" />
|
||||||
<div
|
<div
|
||||||
@ -51,12 +49,6 @@ export default create({
|
|||||||
this.inited = this.inited || this.isSelected;
|
this.inited = this.inited || this.isSelected;
|
||||||
},
|
},
|
||||||
|
|
||||||
'parent.computedWidth'(width) {
|
|
||||||
this.paneStyle = {
|
|
||||||
width: `${width}px`
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
title() {
|
title() {
|
||||||
this.parent.setLine();
|
this.parent.setLine();
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,20 +10,20 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display:none;">
|
<div class="van-tabs__track" style="left:0%;">
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -39,36 +39,36 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display:none;">
|
<div class="van-tabs__track" style="left:0%;">
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -84,16 +84,16 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display:none;">
|
<div class="van-tabs__track" style="left:0%;">
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -109,16 +109,16 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display:none;">
|
<div class="van-tabs__track" style="left:0%;">
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -134,12 +134,12 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display:none;">
|
<div class="van-tabs__track" style="left:0%;">
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -155,20 +155,20 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display:none;">
|
<div class="van-tabs__track" style="left:0%;">
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -184,8 +184,8 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display:none;">
|
<div class="van-tabs__track" style="left:0%;">
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<div>
|
<div>
|
||||||
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<div>
|
<div>
|
||||||
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
|
<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>
|
||||||
<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__wrap van-hairline--top-bottom">
|
||||||
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
|
<div class="van-tabs__nav van-tabs__nav--line" style="border-color:undefined;">
|
||||||
<div class="van-tabs__line"></div>
|
<div class="van-tabs__line"></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<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-tabs__track" style="left:0%;transition-duration:0.3s;">
|
||||||
<div class="van-tab__pane van-tab__pane--float">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane van-tab__pane--float">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane van-tab__pane--float">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane van-tab__pane--float">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -244,20 +244,20 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display:none;">
|
<div class="van-tabs__track" style="left:0%;">
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display:none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -8,16 +8,16 @@ exports[`change tabs data 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display: none;">
|
<div class="van-tabs__track" style="left: 0%;">
|
||||||
<div class="van-tab__pane" style="display: none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<div><span>title2</span></div>
|
<div><span>title2</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -43,16 +43,16 @@ exports[`change tabs data 2`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display: none;">
|
<div class="van-tabs__track" style="left: 0%;">
|
||||||
<div class="van-tab__pane" style="">
|
<div class="van-tab__pane van-tab__pane--active">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<div><span>title2</span></div>
|
<div><span>title2</span></div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -78,14 +78,14 @@ exports[`click to switch tab 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display: none;">
|
<div class="van-tabs__track" style="left: 0%;">
|
||||||
<div class="van-tab__pane" style="width: 0px;">Text
|
<div class="van-tab__pane van-tab__pane--active">Text
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -111,14 +111,14 @@ exports[`click to switch tab 2`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display: none;">
|
<div class="van-tabs__track" style="left: -100%;">
|
||||||
<div class="van-tab__pane" style="width: 0px; display: none;">Text
|
<div class="van-tab__pane van-tab__pane--inactive">Text
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="width: 0px;">
|
<div class="van-tab__pane van-tab__pane--active">
|
||||||
Text
|
Text
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -144,14 +144,14 @@ exports[`swipe to switch tab 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display: none;">
|
<div class="van-tabs__track" style="left: 0%;">
|
||||||
<div class="van-tab__pane" style="width: 0px;">Text
|
<div class="van-tab__pane van-tab__pane--active">Text
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -177,14 +177,14 @@ exports[`swipe to switch tab 2`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display: none;">
|
<div class="van-tabs__track" style="left: -100%;">
|
||||||
<div class="van-tab__pane" style="width: 0px; display: none;">Text
|
<div class="van-tab__pane van-tab__pane--inactive">Text
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="width: 0px;">
|
<div class="van-tab__pane van-tab__pane--active">
|
||||||
Text
|
Text
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -210,14 +210,14 @@ exports[`swipe to switch tab 3`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display: none;">
|
<div class="van-tabs__track" style="left: -100%;">
|
||||||
<div class="van-tab__pane" style="width: 0px; display: none;">Text
|
<div class="van-tab__pane van-tab__pane--inactive">Text
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="width: 0px;">
|
<div class="van-tab__pane van-tab__pane--active">
|
||||||
Text
|
Text
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -243,14 +243,14 @@ exports[`swipe to switch tab 4`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="display: none;">
|
<div class="van-tabs__track" style="left: 0%;">
|
||||||
<div class="van-tab__pane" style="width: 0px;">Text
|
<div class="van-tab__pane van-tab__pane--active">Text
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="width: 0px; display: none;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
Text
|
Text
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane" style="display: none; width: 0px;">
|
<div class="van-tab__pane van-tab__pane--inactive">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -122,6 +122,14 @@
|
|||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__track {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
will-change: left;
|
||||||
|
}
|
||||||
|
|
||||||
&--line {
|
&--line {
|
||||||
padding-top: @tabs-line-height;
|
padding-top: @tabs-line-height;
|
||||||
|
|
||||||
@ -139,10 +147,18 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.van-tab__pane {
|
.van-tab__pane {
|
||||||
|
width: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
|
flex-shrink: 0;
|
||||||
&--float {
|
overflow-y: auto;
|
||||||
float: left;
|
|
||||||
|
&--inactive {
|
||||||
|
height: 0;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
&--active {
|
||||||
|
height: auto;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -44,7 +44,6 @@
|
|||||||
:class="b('content')"
|
:class="b('content')"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
v-show="computedWidth !== 0"
|
|
||||||
:class="b('track')"
|
:class="b('track')"
|
||||||
:style="trackStyle"
|
:style="trackStyle"
|
||||||
>
|
>
|
||||||
@ -112,8 +111,7 @@ export default create({
|
|||||||
resize: false,
|
resize: false,
|
||||||
sticky: false,
|
sticky: false,
|
||||||
swipeable: false
|
swipeable: false
|
||||||
},
|
}
|
||||||
computedWidth: 0
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -149,18 +147,18 @@ export default create({
|
|||||||
trackStyle() {
|
trackStyle() {
|
||||||
const {
|
const {
|
||||||
curActive,
|
curActive,
|
||||||
computedWidth = 0,
|
|
||||||
tabs,
|
|
||||||
animated
|
animated
|
||||||
} = this;
|
} = this;
|
||||||
if (!animated) return {};
|
|
||||||
|
|
||||||
const offset = -1 * computedWidth * curActive;
|
const trackStyle = {
|
||||||
return {
|
left: `${-1 * curActive * 100}%`
|
||||||
width: `${computedWidth * tabs.length}px`,
|
|
||||||
transitionDuration: `${this.duration}s`,
|
|
||||||
transform: `translateX(${offset}px)`
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
if (animated) {
|
||||||
|
trackStyle.transitionDuration = `${this.duration}s`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return trackStyle;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -203,7 +201,6 @@ export default create({
|
|||||||
mounted() {
|
mounted() {
|
||||||
this.correctActive(this.active);
|
this.correctActive(this.active);
|
||||||
this.setLine();
|
this.setLine();
|
||||||
this.setWidth();
|
|
||||||
|
|
||||||
this.$nextTick(() => {
|
this.$nextTick(() => {
|
||||||
this.handlers(true);
|
this.handlers(true);
|
||||||
@ -227,13 +224,6 @@ export default create({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
setWidth() {
|
|
||||||
if (this.$el) {
|
|
||||||
const rect = this.$el.getBoundingClientRect() || {};
|
|
||||||
this.computedWidth = rect.width;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// whether to bind sticky listener
|
// whether to bind sticky listener
|
||||||
handlers(bind) {
|
handlers(bind) {
|
||||||
const { events } = this;
|
const { events } = this;
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user