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

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

html

Box" wx:if="{{showModalStatus}}">

CSS

Box {

width: 100%;

overflow: hidden;

position: fixed;

bottom: 0;

left: 0;

z-index: 2000;

background: #fff;

padding-top: 20rpx;

}

JS动画样式

显示遮罩层

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,})

setTimeout(function () {

animation.translateY(0).step()

this.setData({

animationData: animation.export(),showModalStatus: false

})

}.bind(this),200)

}

以上所述是小编给大家介绍的JS中微信小程序自定义底部弹出框。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。

总结

以上是编程之家为你收集整理的JS中微信小程序自定义底部弹出框全部内容，希望文章能够帮你解决JS中微信小程序自定义底部弹出框所遇到的程序开发问题。

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。

如您喜欢交流学习经验，点击链接加入交流1群：1065694478(已满)交流2群：163560250