大概是通过 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真机上的效果就是这样：
试了修改很多地方，都没办法，不知道问题出在哪了，望大神解答，谢谢。