微信小程序实现弹出菜单


Posted in Javascript onJuly 19, 2018

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

菜单

微信小程序实现弹出菜单

代码:

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
不间断滚动JS打包类,基本可以实现所有的滚动效果,太强了
Dec 08 Javascript
零基础学JavaScript最新动画教程+iso光盘下载
Jan 22 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
js 显示base64编码的二进制流网页图片
Apr 04 Javascript
javasript实现密码的隐藏与显示
May 08 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
JS中关于事件处理函数名后面是否带括号的问题
Nov 16 Javascript
Vue组件中prop属性使用说明实例代码详解
May 31 Javascript
vue在手机中通过本机IP地址访问webApp的方法
Aug 15 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
Nov 12 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
微信小程序实现之手势锁功能实例代码
Jul 19 #Javascript
React组件重构之嵌套+继承及高阶组件详解
Jul 19 #Javascript
微信小程序实现折叠展开效果
Jul 19 #Javascript
详解Angularjs 自定义指令中的数据绑定
Jul 19 #Javascript
微信小程序实现天气预报功能
Jul 18 #Javascript
vue代理和跨域问题的解决
Jul 18 #Javascript
小程序自定义组件实现城市选择功能
Jul 18 #Javascript
You might like
php生成QRcode实例
2014/09/22 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
javascript 动态生成私有变量访问器
2009/12/06 Javascript
js post方式传递提交的实现代码
2010/05/31 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
JS中Date日期函数中的参数使用介绍
2014/01/02 Javascript
使用phantomjs进行网页抓取的实现代码
2014/09/29 Javascript
jQuery插件Slider Revolution实现响应动画滑动图片切换效果
2015/06/05 Javascript
jquery实现点击其他区域时隐藏下拉div和遮罩层的方法
2015/12/23 Javascript
jquery读写cookie操作实例分析
2015/12/24 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
Angular ng-class详解及实例代码
2016/09/19 Javascript
关于Javascript中defer和async的区别总结
2016/09/20 Javascript
JS正则匹配中文的方法示例
2017/01/06 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
新手如何快速理解js异步编程
2019/06/24 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
解决ant Design Search无法输入内容的问题
2020/10/29 Javascript
python解析xml模块封装代码
2014/02/07 Python
使用sklearn进行对数据标准化、归一化以及将数据还原的方法
2018/07/11 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
pytorch-神经网络拟合曲线实例
2020/01/15 Python
在css3中background-clip属性与background-origin属性的用法介绍
2012/11/13 HTML / CSS
从零实现一个自定义html5播放器的示例代码
2017/08/01 HTML / CSS
行政办公室岗位职责
2014/03/18 职场文书
就业协议书怎么填
2014/04/11 职场文书
新店开张活动方案
2014/08/24 职场文书
2014年生产管理工作总结
2014/12/23 职场文书
大学生心理健康活动总结
2015/05/08 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书
解决SpringBoot跨域的三种方式
2021/06/26 Java/Android
Python List remove()实例用法详解
2021/08/02 Python