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

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

效果图：

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,

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)

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持萬仟网。

如您对本文有疑问或者有任何想说的，请点击进行留言回复，万千网友为您解惑！