大概是通过 animation 拉起一个局部页面,
wxml文件大概结果如下:
< view class = "container" > < form >........</ form > < view animation = "{{animationData}}" class = "dialog-container" wx:if = "{{showModalStatus}}" >(局部页面view) </ view > </ view > |
wxss中对应两个关键class的样式:
.container { height: auto; } .complain-dialog-container{ width: 100%; height: 100%; justify-content: space-between; background-color:rgba(15, 15, 26, 0.7); position: fixed; z-index: 999; display: flex; flex-direction: column; } |
js文件中对应几个关键的方法:
let animationShowHeight = 300; ......... ......... showModal: function () { // 显示遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear" , delay: 0 }) this .animation = animation animation.translateY(animationShowHeight).step() this .setData({ animationData: animation.export(), showModalStatus: true }) console.debug( this .data.animationData); console.debug(animationShowHeight); setTimeout( function () { animation.translateY(0).step() this .setData({ animationData: animation.export() }) }.bind( this ), 200) }, hideModal: function () { // 隐藏遮罩层 var animation = wx.createAnimation({ duration: 200, timingFunction: "linear" , delay: 0 }) this .animation = animation; animation.translateY(animationShowHeight).step() this .setData({ animationData: animation.export(), }) setTimeout( function () { animation.translateY(0).step() this .setData({ animationData: animation.export(), showModalStatus: false }) }.bind( this ), 200) }, onShow: function () { let that = this ; wx.getSystemInfo({ success: function (res) { animationShowHeight = res.windowHeight; } }) }, |
然后微信小程序开发工具中模拟的结果,以及安卓手机的效果都是正确的,如图:
但是iOS真机上的效果就是这样:
试了修改很多地方,都没办法,不知道问题出在哪了,望大神解答,谢谢。