JS中微信小程序自定义底部弹出框的教程
发布时间：01/15 来源： 浏览：
关键词：
这篇文章介绍了js中开发微信小程序自定义底部弹出框效果的教程，还给了实例代码，非常不错，具有参考借鉴价值，有需要的朋友快学习一下吧
实现微信小程序底部弹出框效果，代码分为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() {
// 显示遮罩层
varanimation = 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() {
// 隐藏遮罩层
varanimation = 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)
}
|
