利用Android开发微信小程序弹出菜单代码

先给大家展示下效果图，具体效果图如下所示：

1.index.js

//index.js
//获取应用实例
var app = getApp()
Page({
 data: {
 isPopping: false,//是否已经弹出
 animationPlus: {},//旋转动画
 animationcollect: {},//item位移,透明度
 animationTranspond: {},//item位移,透明度
 animationInput: {},//item位移,透明度
 //我的博客:#
 //CSDN微信小程序开发专栏:#
 },
 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: &＃39;ease-out&＃39;
 })
 var animatiOncollect= wx.createAnimation({
 duration: 500,
 timingFunction: &＃39;ease-out&＃39;
 })
 var animatiOnTranspond= wx.createAnimation({
 duration: 500,
 timingFunction: &＃39;ease-out&＃39;
 })
 var animatiOnInput= wx.createAnimation({
 duration: 500,
 timingFunction: &＃39;ease-out&＃39;
 })
 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: &＃39;ease-out&＃39;
 })
 var animatiOncollect= wx.createAnimation({
 duration: 500,
 timingFunction: &＃39;ease-out&＃39;
 })
 var animatiOnTranspond= wx.createAnimation({
 duration: 500,
 timingFunction: &＃39;ease-out&＃39;
 })
 var animatiOnInput= wx.createAnimation({
 duration: 500,
 timingFunction: &＃39;ease-out&＃39;
 })
 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

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;
}

以上就是利用Android开发微信小程序弹出菜单代码的详细内容，更多请关注 第一PHP社区 其它相关文章！