壶总,李易 配音,共青城
本文实例为大家分享了微信小程序底部弹出框展示的具体代码,供大家参考,具体内容如下
效果图:
html
<view class="commodity_screen" bindtap="hidemodal" wx:if="{{showmodalstatus}}"></view> <view animation="{{animationdata}}" class="commodity_attr_box" wx:if="{{showmodalstatus}}"></view>
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) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持移动技术网。
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
JavaScript使用prototype属性实现继承操作示例
JavaScript直接调用函数与call调用的区别实例分析
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
网友评论