diff --git a/components/configureDevice_2_addUser/configureDevice_2_addUser.js b/components/configureDevice_2_addUser/configureDevice_2_addUser.js index 61f3a8e..b118a92 100644 --- a/components/configureDevice_2_addUser/configureDevice_2_addUser.js +++ b/components/configureDevice_2_addUser/configureDevice_2_addUser.js @@ -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); }, // 关闭弹窗并重置所有数据 diff --git a/components/configureDevice_2_addUser/configureDevice_2_addUser.wxml b/components/configureDevice_2_addUser/configureDevice_2_addUser.wxml index 8070a09..0561ea9 100644 --- a/components/configureDevice_2_addUser/configureDevice_2_addUser.wxml +++ b/components/configureDevice_2_addUser/configureDevice_2_addUser.wxml @@ -99,7 +99,7 @@ - + 姓名: diff --git a/components/configureDevice_2_addUser/configureDevice_2_addUser.wxss b/components/configureDevice_2_addUser/configureDevice_2_addUser.wxss index a96960f..106455a 100644 --- a/components/configureDevice_2_addUser/configureDevice_2_addUser.wxss +++ b/components/configureDevice_2_addUser/configureDevice_2_addUser.wxss @@ -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;