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

前端之家收集整理的这篇文章主要介绍了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 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

猜你在找的微信小程序相关文章