微信小程序自定义底部弹出框

微信小程序自定义底部弹出框

本文实例为大家分享了微信小程序底部弹出框展示的具体代码，供大家参考，具体内容如下

效果图：

html

css

.commodity_screen {

width: 100%;

height: 100%;

position: fixed;

top: 0;

left: 0;

background: #000;

opacity: 0.2;

overflow: hidden;

z-index: 1000;

color: #fff;

}

.commodity_attr_box {

width: 100%;

overflow: hidden;

position: fixed;

bottom: 0;

left: 0;

z-index: 2000;

background: #fff;

padding-top: 20rpx;

}

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,

zOiOSHv 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)

}

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。