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

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

发布于 2020-4-9|

复制链接

本文通过实例代码给大家介绍了js开发中微信小程序自定义底部弹出框效果，非常不错，具有参考借鉴价值，需要的朋友参考下

实现微信小程序底部弹出框效果，代码分为html，css和js两部分，具体代码详情大家参考下本文。html

```javascript

```

CSS

```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动画样式

```javascript

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)

}

```