微信小程序实现弹出菜单
程序员文章站
2023-10-29 22:59:58
本文实例为大家分享了微信小程序实现弹出菜单的具体代码,供大家参考,具体内容如下
菜单
代码:
1.index.js
//index.js
/...
本文实例为大家分享了微信小程序实现弹出菜单的具体代码,供大家参考,具体内容如下
菜单
代码:
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代码下载
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: 中医养生 推拿按摩的治疗方法及推拿手法
下一篇: 微信小程序实现分享到朋友圈功能