本文实例为大家分享了微信小程序实现弹出菜单的具体代码，供大家参考，具体内容如下
菜单
代码:
1.index.js
我要评论
//index.js
//获取应用实例
var app = getapp()
page({
data: {
ispopping: false,//是否已经弹出
animationplus: {},//旋转动画
animationcollect: {},//item位移,透明度
animationtranspond: {},//item位移,透明度
animationinput: {},//item位移,透明度
//我的博客:http://blog.csdn.net/qq_31383345
//csdn微信小程序开发专栏:http://blog.csdn.net/column/details/13721.html
},
onload: function () {
},
//点击弹出
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'
})
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(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(),
animationcollect: animationcollect.export(),
animationtranspond: animationtranspond.export(),
animationinput: animationinput.export(),
})
}
2.index.wxml
<!--index.wxml-->
<image src="../../images/collect.png" animation="{{animationcollect}}" class="image-style" bindtap="collect"></image>
<image src="../../images/transpond.png" animation="{{animationtranspond}}" class="image-style" bindtap="transpond"></image>
<image src="../../images/input.png" animation="{{animationinput}}" class="image-style" bindtap="input"></image>
<image src="../../images/plus.png" animation="{{animationplus}}" class="image-plus-style" bindtap="plus"></image>
3.index.wxss
/**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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问， 点击进行留言回复！！
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑
vert实践五——Json？Protocol Buffer？FlatBuffers？
[基于tensorflow的人脸检测] 基于神经网络的人脸检测8——验证训练好的神经网络
网友评论