Commit 697d35cf authored by leon's avatar leon

fix: dropdown animation in ios device

parent a594c45c
<template> <template>
<view class="normal-tabs"> <view class="normal-tabs">
<u-tabs v-if="elementInfo.option.tabs.type === 'tabs'" :list="elementData.dataList.series" :is-scroll='elementData.dataList.series.length > 4' <u-tabs v-if="elementInfo.option.tabs.type === 'tabs'" :list="elementData.dataList.series"
:is-scroll='elementData.dataList.series.length > 4'
:current="currentTabs" :active-color="elementInfo.option.tabs.activeColor" :current="currentTabs" :active-color="elementInfo.option.tabs.activeColor"
:inactive-color="elementInfo.option.tabs.color" :bg-color="elementInfo.option.tabs.backgroundColor" :inactive-color="elementInfo.option.tabs.color" :bg-color="elementInfo.option.tabs.backgroundColor"
:font-size="getFontSize()" @change="handleTabsChange"></u-tabs> :font-size="getFontSize()" @change="handleTabsChange"></u-tabs>
...@@ -35,9 +36,11 @@ ...@@ -35,9 +36,11 @@
</template> </template>
<u-dropdown v-if="elementInfo.option.tabs.type === 'dropdown'" :title-size="getFontSize()" ref="uDropdown" <u-dropdown v-if="elementInfo.option.tabs.type === 'dropdown'" :title-size="getFontSize()" ref="uDropdown"
:active-color="elementInfo.option.tabs.color" :inactive-color="elementInfo.option.tabs.color" :menu-icon-size="getFontSize()" :height="elementInfo.height"> :active-color="elementInfo.option.tabs.color" :inactive-color="elementInfo.option.tabs.color"
:menu-icon-size="getFontSize()" :height="getHeight()">
<u-dropdown-item v-model="tabsValue" :title="getSelectLabel(tabsValue)"> <u-dropdown-item v-model="tabsValue" :title="getSelectLabel(tabsValue)">
<view class="slot-content" :style="{'background-color': elementInfo.option.tabs.itemBackgroundColor}" v-for="(item, index) in elementData.dataList.series" :key="index"> <view class="slot-content" :style="{'background-color': elementInfo.option.tabs.itemBackgroundColor}"
v-for="(item, index) in elementData.dataList.series" :key="index">
<view class="drop-item" @click="handleDropdownValue(item)" <view class="drop-item" @click="handleDropdownValue(item)"
:style="{ :style="{
'color':tabsValue === item.value ? elementInfo.option.tabs.activeColor : elementInfo.option.tabs.color, 'color':tabsValue === item.value ? elementInfo.option.tabs.activeColor : elementInfo.option.tabs.color,
...@@ -242,6 +245,9 @@ ...@@ -242,6 +245,9 @@
}, },
getFontSize() { getFontSize() {
return this.$u.common.pxToRpx(this.elementInfo.option.tabs.fontSize) return this.$u.common.pxToRpx(this.elementInfo.option.tabs.fontSize)
},
getHeight() {
return this.$u.common.pxToRpx(this.elementInfo.height)
} }
}, },
watch: { watch: {
......
...@@ -134,7 +134,8 @@ ...@@ -134,7 +134,8 @@
popupStyle() { popupStyle() {
let style = {}; let style = {};
// 进行Y轴位移,展开状态时,恢复原位。收齐状态时,往上位移100%,进行隐藏 // 进行Y轴位移,展开状态时,恢复原位。收齐状态时,往上位移100%,进行隐藏
style.transform = `translateY(${this.active ? 0 : '-100%'})` // style.transform = `translateY(${this.active ? 0 : "-100%"})`;
style.transform = `scaleY(${this.active ? 1 : 0})`
style['transition-duration'] = this.duration / 1000 + 's'; style['transition-duration'] = this.duration / 1000 + 's';
style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`; style.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
return style; return style;
...@@ -291,6 +292,7 @@ ...@@ -291,6 +292,7 @@
&__popup { &__popup {
position: relative; position: relative;
z-index: 10; z-index: 10;
transform-origin: center top;
transition: all 0.3s; transition: all 0.3s;
transform: translate3D(0, -100%, 0); transform: translate3D(0, -100%, 0);
overflow: hidden; overflow: hidden;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment