微信小程序实现弹出菜单

本文实例为大家分享了微信小程序实现弹出菜单的具体代码，供大家参考，具体内容如下

菜单

代码:

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代码下载

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。