收藏
回答

通过animation生成的局部页面在iOS中展示异常

问题模块
API和组件

大概是通过 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真机上的效果就是这样:



试了修改很多地方,都没办法,不知道问题出在哪了,望大神解答,谢谢。

最后一次编辑于  2017-06-27  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答