本文实例为大家分享了微信小程序实现弹出菜单的具体代码,供大家参考,具体内容如下
代码:
1.index.js
},//点击弹出
plus: function () {
if (this.data.isPopping) {
//缩回动画
popp.call(this);
this.setData({
isPopping: false
})
} else {
//弹出动画
takeback.call(this);
this.setData({
isPopping: true
})
}
},input: function () {
console.log("input")
},transpond: function () {
console.log("transpond")
},collect: function () {
console.log("collect")
}
})
//弹出动画
function popp() {
//plus顺时针旋转
var animationPlus = wx.createAnimation({
duration: 500,timingFunction: 'ease-out'
})
var animationcollect = wx.createAnimation({
duration: 500,timingFunction: 'ease-out'
})
var animationTranspond = wx.createAnimation({
duration: 500,timingFunction: 'ease-out'
})
var animationInput = wx.createAnimation({
duration: 500,timingFunction: 'ease-out'
})
animationPlus.rotateZ(180).step();
animationcollect.translate(-100,-100).rotateZ(180).opacity(1).step();
animationTranspond.translate(-140,0).rotateZ(180).opacity(1).step();
animationInput.translate(-100,100).rotateZ(180).opacity(1).step();
this.setData({
animationPlus: animationPlus.export(),animationcollect: animationcollect.export(),animationTranspond: animationTranspond.export(),animationInput: animationInput.export(),})
}
//收回动画
function takeback() {
//plus逆时针旋转
var animationPlus = wx.createAnimation({
duration: 500,timingFunction: 'ease-out'
})
animationPlus.rotateZ(0).step();
animationcollect.translate(0,0).rotateZ(0).opacity(0).step();
animationTranspond.translate(0,0).rotateZ(0).opacity(0).step();
animationInput.translate(0,0).rotateZ(0).opacity(0).step();
this.setData({
animationPlus: animationPlus.export(),})
}
2.index.wxml
3.index.wxss
.image-style {
height: 150rpx;
width: 150rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
opacity: 0;
}
.image-plus-style {
height: 150rpx;
width: 150rpx;
position: absolute;
bottom: 250rpx;
right: 100rpx;
z-index: 100;
}
demo代码下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。