微信小程序实现弹出菜单

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

菜单

代码：

1.index.js

//index.js//获取应用实例var app=GetApp()Page({ data : { isPop : false，//是否已经弹出animationPlus: { }，//旋转动画animationcollect: {}，//项位移，透明度动画传输： {},//项位移，透明度animationInput: {}，//项位移，透明度//我的博客：http://blog.csdn.net/qq_31383345//CSDN微信小程序开发专栏：http://blog.csdn.net/column/details/13721.html }、在线：函数(){ }、//点击弹出加上：函数(){ if(this。数据。iso ping){//缩回动画popp.call(这个);这个。setdata({ isopp : false })} else {//弹出动画收回。调用（这个);这个。setdata({ isopp : true })} }，input : function(){ console。日志('输入')}，trans cond : function(){ console。日志('回复')}，收集：函数(){控制台。日志('收集')})//弹出动画函数popp() { //plus顺时针旋转var animationPlus=wx。create animation({ duration : 500，TimingFunctions : ' ease-out ' })var animation collect=wx。create animation({ duration : 500，TimingFunctions : ' ease-out ' })var animationTranspond=wx。create animation({ duration : 500，TimingFunctions : ' ease-out ' })var animationInput=wx。createanimationstep()；动画收藏。翻译(-100，-100).rotateZ(180).不透明度(1)。step()；动画传输。翻译(-140，0).rotateZ(180).不透明度(1)。step()；animationInput.translate(-100，100).rotateZ(180).不透明度(1)。step()；这个。setdata({ animation plus 3360 animation plus。export()、animation collect : animation collect。export()、animation transpond : animation transpond。export()、animation input : animation input。export()、})}//收回动画函数takeback() { //plus逆时针旋转var animationPlus=wx。create animation({ duration : 500，TimingFunctions : ' ease-out ' })var animation collect=wx。create animation({ duration : 500，TimingFunctions : ' ease-out ' })var animationTranspond=wx。create animation({ duration : 500，TimingFunctions : ' ease-out ' })var animationInput=wx。createanimationstep()；animationcollect.translate(0，0).rotateZ(0).不透明度(0)。step()；animationTranspond.translate(0，0).rotateZ(0).不透明度(0)。step()；动画输入输出翻译(0，0).rotateZ(0).不透明度(0)。step()；这个。setdata({ animation plus 3360 animation plus。export()、animation collect : animation collect。export()、animation transpond : animation transpond。export()、animation input : animation input。export()，})}2.index.wxml

！索引。wxml-image src=' http :/./图像/收集。png ' animation=' { { animation collect } } ' class=' image-style ' bind tap=' collect '/image image src=' http :/./images/转发器。png ' animation=' { { animationTranspond } } ' class=' image-style ' bind tap='转发器/imageimage src='http:/./图像/输入。png ' animation=' { { animation input } } ' class=' image-style ' bind tap=' input '/image image src=' http 3360././images/plus。png ' animation=' { { animation plus } } ' class=' image-plus-style ' bind tap=' plus '/image 3。索引。页面样式表

/**index.wxss**/.图像式{ height: 150rpx宽度： 150 rpx绝对位置：bottom : 250 rpxright : 100 rpxopa city 3360 0；}.图像加样式{ height: 150rpx宽度： 150 rpx绝对位置：bottom : 250 rpxright : 100 rpxz-index : 100；}演示代码下载

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