微信小程序自定义底部弹出框
2018-10-15 18:05
阅读：710
本文实例为大家分享了微信小程序底部弹出框展示的具体代码，供大家参考，具体内容如下
效果图：
html
<view class=commodity_screen bindtap=hideModal wx:if={{showModalStatus}}></view> <view animation={{animationData}} class=commodity_attr_box wx:if={{showModalStatus}}></view>CSS
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) }以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
评论
亲，登录后才可以留言！