推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
ECSHOP 小程序底部滑出效果,淡入效果,底部菜单导航,加入购物车 ...
发布时间:2021-01-05
ECSHOP 小程序底部滑出效果,淡入效果,底部菜单导航,加入购物车 演示扫描二维码
收藏一个商品之后 -> 个人中心 -> 我的收藏 查看演示效果。
QQ：4292423
上先效果图。
JS（这里的JS我是直接用别人的，CSDN有下，自己处理了下样式）
[javascript] view plain copy
let animationShowHeight = 300;
Page({
data: {
showModalStatus: false,
imageHeight: 0,
imageWidth: 0
},
showModal: function () {
// 显示遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation
animation.translateY(animationShowHeight).step()
this.setData({
animationData: animation.export(),
showModalStatus: true
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export()
})
}.bind(this), 0)
},
hideModal: function () {
// 隐藏遮罩层
var animation = wx.createAnimation({
duration: 200,
timingFunction: "linear",
delay: 0
})
this.animation = animation;
animation.translateY(animationShowHeight).step()
this.setData({
animationData: animation.export(),
})
setTimeout(function () {
animation.translateY(0).step()
this.setData({
animationData: animation.export(),
showModalStatus: false
})
}.bind(this), 200)
},
onShow: function () {
let that = this;
wx.getSystemInfo({
success: function (res) {
animationShowHeight = res.windowHeight;
}
})
},
})
CSS
[css] view plain copy
.add {
background: #f60;
color: #fff;
float: right;
padding: 14rpx 35rpx;
margin-right: 20rpx;
}
.can {
background: #eee;
float: right;
padding: 14rpx 35rpx;
margin-right: 0rpx;
}
.container-column {
display: flex;
flex-direction: column;
width: 100%;
background-color: white;
}
.buydes-container {
display: flex;
height: 100%;
justify-content: space-between;
}
.buydes-dialog-container {
width: 100%;
height: 100%;
justify-content: space-between;
- 上一篇：一个人如何写一个小程序
- 下一篇：微信小程序实战商城系列《五》购物车
