收藏
回答

cover-view


我写了一个弹窗代码是这样的

<!-- 物品类别弹窗 -->

<cover-view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></cover-view>

<cover-view animation="{{animationData}}" class="commodity_attr_box" wx:if="{{showModalStatus}}">

<cover-view class='cancel' bindtap='hideModal'>取消</cover-view>

<cover-view class='title'>请选择物品品类</cover-view>

<cover-view class='sure'>确定</cover-view>

<cover-view class='glist'>

<cover-view class='list-item item-chose'>食品饮料</cover-view>

<cover-view class='list-item'>鲜花</cover-view>

<cover-view class='list-item' style='margin-right:0;'>蛋糕</cover-view>

<cover-view class='list-item'>其他</cover-view>

</cover-view>

</cover-view>

js里面是这么写的

// 物品类别弹窗

showModal: function () {

// 显示遮罩层

var animation = wx.createAnimation({

duration: 200,

timingFunction: "linear",

delay: 0

})

this.animation = animation

animation.translateY(300).step()

this.setData({

animationData: animation.export(),

showModalStatus: true

})

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(300).step()

this.setData({

animationData: animation.export(),

})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation.export(),

showModalStatus: false

})

}.bind(this), 200)

},

在编辑器上和ios手机上弹出是正常的但是在安卓手机上页面不上滑的时候弹出框正常在底部页面上滑之后弹窗也跟着靠上面了



最后一次编辑于  2019-06-03
回答关注问题邀请回答
收藏

1 个回答

  • 倪银龙
    倪银龙
    2019-09-04

    <cover-view class="commodity_screen" bindtap="hideModal" wx:if="{{showModalStatus}}"></cover-view> 这样不行吧?官方不是说cover-view不能用wx:if进行显示与隐藏的吧

    2019-09-04
    赞同
    回复
登录 后发表内容