mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
[improvement] Tab: optimize animated tab (#2302)
This commit is contained in:
neverland
GitHub
parent
e2c4d60058
commit
347e980da9
@ -93,14 +93,13 @@
|
|||||||
<demo-block :title="$t('title8')">
|
<demo-block :title="$t('title8')">
|
||||||
<van-tabs
|
<van-tabs
|
||||||
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"
|
||||||
>
|
>
|
||||||
<div class="custom-content-wrap">{{ $t('content') }} {{ index }}</div>
|
{{ $t('content') }} {{ index }}
|
||||||
</van-tab>
|
</van-tab>
|
||||||
</van-tabs>
|
</van-tabs>
|
||||||
</demo-block>
|
</demo-block>
|
||||||
@ -214,16 +213,5 @@ 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,6 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
:class="b('pane', { inactive: !isSelected, active: isSelected })"
|
v-show="isSelected || parent.animated"
|
||||||
|
:class="b('pane')"
|
||||||
>
|
>
|
||||||
<slot v-if="inited" />
|
<slot v-if="inited" />
|
||||||
<div
|
<div
|
||||||
@ -29,8 +30,7 @@ export default create({
|
|||||||
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
inited: false,
|
inited: false
|
||||||
paneStyle: {}
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -10,23 +10,21 @@ 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="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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -39,39 +37,37 @@ 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="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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -84,19 +80,17 @@ 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="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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -109,19 +103,17 @@ 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="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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -134,15 +126,13 @@ 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="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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -155,23 +145,21 @@ 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="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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -184,23 +172,21 @@ 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="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;">
|
<!---->
|
||||||
<!---->
|
<!----></i>标签
|
||||||
<!----></i>标签
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">
|
</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;">
|
<div>
|
||||||
<!---->
|
<div><i class="van-icon van-icon-more-o" style="color:undefined;font-size:undefined;">
|
||||||
<!----></i>标签
|
<!---->
|
||||||
</div>
|
<!----></i>标签
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -208,7 +194,7 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</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__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>
|
||||||
@ -216,19 +202,19 @@ exports[`renders demo correctly 1`] = `
|
|||||||
</div>
|
</div>
|
||||||
<div class="van-tabs__content">
|
<div class="van-tabs__content">
|
||||||
<div class="van-tabs__track" style="left:0%;transition-duration:0.3s;">
|
<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>
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">
|
<div class="van-tab__pane">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">
|
<div class="van-tab__pane">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">
|
<div class="van-tab__pane">
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
@ -244,23 +230,21 @@ 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="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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -8,19 +8,17 @@ 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="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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -43,19 +41,17 @@ 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="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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -78,17 +74,15 @@ 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="left: 0%;">
|
<div class="van-tab__pane" style="">Text
|
||||||
<div class="van-tab__pane van-tab__pane--active">Text
|
<!---->
|
||||||
<!---->
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -111,17 +105,15 @@ 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="left: -100%;">
|
<div class="van-tab__pane" style="display: none;">Text
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">Text
|
<!---->
|
||||||
<!---->
|
</div>
|
||||||
</div>
|
<div class="van-tab__pane" style="">
|
||||||
<div class="van-tab__pane van-tab__pane--active">
|
Text
|
||||||
Text
|
</div>
|
||||||
</div>
|
<div class="van-tab__pane" style="display: none;">
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -144,17 +136,15 @@ 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="left: 0%;">
|
<div class="van-tab__pane" style="">Text
|
||||||
<div class="van-tab__pane van-tab__pane--active">Text
|
<!---->
|
||||||
<!---->
|
</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>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -177,17 +167,15 @@ 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="left: -100%;">
|
<div class="van-tab__pane" style="display: none;">Text
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">Text
|
<!---->
|
||||||
<!---->
|
</div>
|
||||||
</div>
|
<div class="van-tab__pane" style="">
|
||||||
<div class="van-tab__pane van-tab__pane--active">
|
Text
|
||||||
Text
|
</div>
|
||||||
</div>
|
<div class="van-tab__pane" style="display: none;">
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -210,17 +198,15 @@ 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="left: -100%;">
|
<div class="van-tab__pane" style="display: none;">Text
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">Text
|
<!---->
|
||||||
<!---->
|
</div>
|
||||||
</div>
|
<div class="van-tab__pane" style="">
|
||||||
<div class="van-tab__pane van-tab__pane--active">
|
Text
|
||||||
Text
|
</div>
|
||||||
</div>
|
<div class="van-tab__pane" style="display: none;">
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -243,17 +229,15 @@ 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="left: 0%;">
|
<div class="van-tab__pane" style="">Text
|
||||||
<div class="van-tab__pane van-tab__pane--active">Text
|
<!---->
|
||||||
<!---->
|
</div>
|
||||||
</div>
|
<div class="van-tab__pane" style="display: none;">
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">
|
Text
|
||||||
Text
|
</div>
|
||||||
</div>
|
<div class="van-tab__pane" style="display: none;">
|
||||||
<div class="van-tab__pane van-tab__pane--inactive">
|
<!---->
|
||||||
<!---->
|
<!---->
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -148,17 +148,7 @@
|
|||||||
|
|
||||||
.van-tab__pane {
|
.van-tab__pane {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
box-sizing: border-box;
|
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
overflow-y: auto;
|
box-sizing: border-box;
|
||||||
|
|
||||||
&--inactive {
|
|
||||||
height: 0;
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
&--active {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -44,11 +44,13 @@
|
|||||||
:class="b('content')"
|
:class="b('content')"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
v-if="animated"
|
||||||
:class="b('track')"
|
:class="b('track')"
|
||||||
:style="trackStyle"
|
:style="trackStyle"
|
||||||
>
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
|
<slot v-else />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -145,20 +147,12 @@ export default create({
|
|||||||
},
|
},
|
||||||
|
|
||||||
trackStyle() {
|
trackStyle() {
|
||||||
const {
|
if (this.animated) {
|
||||||
curActive,
|
return {
|
||||||
animated
|
left: `${-1 * this.curActive * 100}%`,
|
||||||
} = this;
|
transitionDuration: `${this.duration}s`
|
||||||
|
};
|
||||||
const trackStyle = {
|
|
||||||
left: `${-1 * curActive * 100}%`
|
|
||||||
};
|
|
||||||
|
|
||||||
if (animated) {
|
|
||||||
trackStyle.transitionDuration = `${this.duration}s`;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return trackStyle;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user