[AI Generated]: fix(Comp): 修复添加用户弹窗的显隐动画逻辑,拆分初始定位与滑入动画,修正隐藏时的 translateY 方向错误
This commit is contained in:
@@ -39,46 +39,28 @@ Component({
|
||||
methods: {
|
||||
// 显示对话框
|
||||
showModal() {
|
||||
// 显示遮罩层
|
||||
let animation = wx.createAnimation({
|
||||
duration: 200,
|
||||
timingFunction: "linear",
|
||||
delay: 0
|
||||
})
|
||||
this.animation = animation;
|
||||
animation.translateY(1200).step();
|
||||
this.setData({
|
||||
animationData: animation.export(),
|
||||
modalStatus: true
|
||||
})
|
||||
// 先瞬间将弹窗移到屏幕下方(duration:0,不产生过渡)
|
||||
let initAnim = wx.createAnimation({ duration: 0 });
|
||||
initAnim.translateY(1200).step();
|
||||
this.setData({ animationData: initAnim.export(), modalStatus: true });
|
||||
// 留一帧让渲染生效,再执行滑入动画
|
||||
setTimeout(() => {
|
||||
let animation = wx.createAnimation({ duration: 300, timingFunction: 'ease' });
|
||||
animation.translateY(0).step();
|
||||
this.setData({
|
||||
animationData: animation.export()
|
||||
})
|
||||
}, 200);
|
||||
this.setData({ animationData: animation.export() });
|
||||
}, 50);
|
||||
},
|
||||
|
||||
//隐藏对话框
|
||||
// 隐藏对话框
|
||||
hideModal() {
|
||||
// 隐藏遮罩层
|
||||
let animation = wx.createAnimation({
|
||||
duration: 200,
|
||||
timingFunction: "linear",
|
||||
delay: 0
|
||||
})
|
||||
this.animation = animation;
|
||||
// 执行滑出动画
|
||||
let animation = wx.createAnimation({ duration: 300, timingFunction: 'ease' });
|
||||
animation.translateY(1200).step();
|
||||
this.setData({
|
||||
animationData: animation.export(),
|
||||
})
|
||||
this.setData({ animationData: animation.export() });
|
||||
// 等动画结束后再隐藏节点
|
||||
setTimeout(() => {
|
||||
animation.translateY(0).step();
|
||||
this.setData({
|
||||
animationData: animation.export(),
|
||||
modalStatus: false
|
||||
})
|
||||
}, 200);
|
||||
this.setData({ modalStatus: false });
|
||||
}, 300);
|
||||
},
|
||||
|
||||
// 关闭弹窗并重置所有数据
|
||||
|
||||
@@ -99,7 +99,7 @@
|
||||
</block>
|
||||
|
||||
<!-- 家庭用户模式 -->
|
||||
<block wx:elif="{{userType === 'family'}}">
|
||||
<block wx:if="{{userType === 'family'}}">
|
||||
<!-- 姓名(手动输入) -->
|
||||
<view class="input">
|
||||
<view>姓名:</view>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
}
|
||||
|
||||
.modal {
|
||||
height: 1100rpx;
|
||||
height: 1200rpx;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
@@ -54,11 +54,45 @@
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.seaction>view:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.select {
|
||||
width: 100%;
|
||||
height: 80rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
padding: 4rpx;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 40rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #F3F5F8;
|
||||
}
|
||||
|
||||
.select>view {
|
||||
color: #808080;
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 72rpx;
|
||||
line-height: 72rpx;
|
||||
font-size: 32rpx;
|
||||
border-radius: 16rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.selectActive {
|
||||
color: #1385FA !important;
|
||||
font-weight: bold;
|
||||
background-color: #FFFFFF;
|
||||
}
|
||||
|
||||
.only,
|
||||
.input,
|
||||
.inputUnit {
|
||||
width: 100%;
|
||||
height: 104rpx;
|
||||
height: 102rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
margin-bottom: 32rpx;
|
||||
@@ -68,22 +102,21 @@
|
||||
.input>view:nth-of-type(1),
|
||||
.inputUnit>view:nth-of-type(1) {
|
||||
color: #333333;
|
||||
height: 104rpx;
|
||||
height: 102rpx;
|
||||
font-size: 32rpx;
|
||||
line-height: 104rpx;
|
||||
line-height: 102rpx;
|
||||
}
|
||||
|
||||
.only>view:nth-of-type(2),
|
||||
.inputUnit>view:nth-of-type(2) {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 104rpx;
|
||||
height: 102rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 16rpx;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
background-color: #F5F7FB;
|
||||
border: 1rpx solid #E6E6EA;
|
||||
}
|
||||
|
||||
@@ -109,7 +142,7 @@
|
||||
.input>view:nth-of-type(2) {
|
||||
flex: 1;
|
||||
width: 0;
|
||||
height: 104rpx;
|
||||
height: 102rpx;
|
||||
padding: 0 30rpx;
|
||||
border-radius: 16rpx;
|
||||
border: 1rpx solid #E6E6EA;
|
||||
@@ -131,11 +164,11 @@
|
||||
.searchBtn {
|
||||
color: #FFFFFF;
|
||||
width: 120rpx;
|
||||
height: 104rpx;
|
||||
height: 102rpx;
|
||||
font-size: 28rpx;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
line-height: 104rpx;
|
||||
line-height: 102rpx;
|
||||
margin-left: 16rpx;
|
||||
border-radius: 16rpx;
|
||||
background-color: #1385FA;
|
||||
|
||||
Reference in New Issue
Block a user