JS中微信小程序自定义底部弹出框
程序员文章站
2022-12-09 15:29:25
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文。
html
实现微信小程序底部弹出框效果,代码分为html,css和js两部分,具体代码详情大家参考下本文。
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) }
以上所述是小编给大家介绍的js中微信小程序自定义底部弹出框,希望对大家有所帮助