最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
JS中微信小程序自定义底部弹出框的教程
时间：2016-12-23 编辑：简简单单 来源：一聚教程网
实现微信小程序底部弹出框效果，代码分为html，css和js两部分，具体代码详情大家参考下本文。
html
|
|
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)
}
|
相关文章
- HTML简单购物数量小程序代码展示 10-31
- html canvas实现弹幕功能 10-31
- HTML中空格表示的意义 10-31
- html area标签解读 10-31
- html使用表单标签实现注册页面代码展示 10-31
- 使用HTML截图并保存为本地图片的代码展示 10-31