Commit 697d35cf authored by leon's avatar leon

fix: dropdown animation in ios device

parent a594c45c
<template>
<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"
:inactive-color="elementInfo.option.tabs.color" :bg-color="elementInfo.option.tabs.backgroundColor"
:font-size="getFontSize()" @change="handleTabsChange"></u-tabs>
......@@ -35,9 +36,11 @@
</template>
<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)">
<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)"
:style="{
'color':tabsValue === item.value ? elementInfo.option.tabs.activeColor : elementInfo.option.tabs.color,
......@@ -242,6 +245,9 @@
},
getFontSize() {
return this.$u.common.pxToRpx(this.elementInfo.option.tabs.fontSize)
},
getHeight() {
return this.$u.common.pxToRpx(this.elementInfo.height)
}
},
watch: {
......
......@@ -134,7 +134,8 @@
popupStyle() {
let style = {};
// 进行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.borderRadius = `0 0 ${this.$u.addUnit(this.borderRadius)} ${this.$u.addUnit(this.borderRadius)}`;
return style;
......@@ -291,6 +292,7 @@
&__popup {
position: relative;
z-index: 10;
transform-origin: center top;
transition: all 0.3s;
transform: translate3D(0, -100%, 0);
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