首页 > 微信应用  > 

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

利用Android开发微信小程序弹出菜单代码
这篇文章主要介绍了利用Android开发微信小程序弹出菜单代码的相关资料,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下

这篇文章主要介绍了利用android开发微信小程序弹出菜单代码的相关资料,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下

先给大家展示下效果图,具体效果图如下所示:

具体代码如下所示:

1.index.js

//index.js//获取应用实例var app = getApp()Page({ data: { isPopping: false,//是否已经弹出 animationPlus: {},//旋转动画 animationcollect: {},//item位移,透明度 animationTranspond: {},//item位移,透明度 animationInput: {},//item位移,透明度 //我的博客:http://www.php.cn/ //CSDN微信小程序开发专栏:http://www.php.cn/ }, 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(), })}

利用Android开发微信小程序弹出菜单代码由讯客互联微信应用栏目发布,感谢您对讯客互联的认可,以及对我们原创作品以及文章的青睐,非常欢迎各位朋友分享到个人网站或者朋友圈,但转载请说明文章出处“利用Android开发微信小程序弹出菜单代码