微信小程序自定义底部弹出框
程序员文章站
2023-11-13 12:37:58
本文实例为大家分享了微信小程序底部弹出框展示的具体代码,供大家参考,具体内容如下
效果图:
html
本文实例为大家分享了微信小程序底部弹出框展示的具体代码,供大家参考,具体内容如下
效果图:
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) }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 深入探讨Vue.js组件和组件通信
下一篇: Vue.js实现拖放效果的实例