微信小程序实现弹出菜单


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图片延迟加载的实现方法及思路
Jul 22 Javascript
浅析JS中document对象的一些重要属性
Mar 06 Javascript
jQuery学习笔记之 Ajax操作篇(二) - 数据传递
Jun 23 Javascript
js查找节点的方法小结
Jan 13 Javascript
使用jQuery实现更改默认alert框体
Apr 13 Javascript
JavaScript返回上一页的三种方法及区别介绍
Jul 04 Javascript
jquery+html5时钟特效代码分享(可设置闹钟并且语音提醒)
Mar 30 Javascript
JQuery DIV 动态隐藏和显示的方法
Jun 23 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
Aug 29 Javascript
JQuery实现简单的复选框树形结构图示例【附源码下载】
Jul 16 jQuery
vue3 源码解读之 time slicing的使用方法
Oct 31 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 前一天或后一天的日期
2008/06/28 PHP
PHP中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
PHP实现读取一个1G的文件大小
2013/08/24 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
php 下 html5 XHR2 + FormData + File API 上传文件操作实例分析
2020/02/28 PHP
PHP设计模式之迭代器模式Iterator实例分析【对象行为型】
2020/04/26 PHP
Laravel 修改验证异常的响应格式实例代码详解
2020/05/25 PHP
javascript 短路法代码精简
2009/08/20 Javascript
jquery last-child 列表最后一项的样式
2010/01/22 Javascript
JavaScript DOM 学习第三章 内容表格
2010/02/19 Javascript
JavaScript中按位“异或”运算符使用介绍
2014/03/14 Javascript
JavaScript中的acos()方法使用详解
2015/06/14 Javascript
浅谈angularJS 作用域
2015/07/05 Javascript
JavaScript使用encodeURI()和decodeURI()获取字符串值的方法
2015/08/04 Javascript
基于jquery实现表格内容筛选功能实例解析
2016/05/09 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
2016/10/17 Javascript
Vue项目中引入外部文件的方法(css、js、less)
2017/07/24 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
2018/01/10 Javascript
Vue数据双向绑定原理实例解析
2020/05/15 Javascript
原生js+canvas实现下雪效果
2020/08/02 Javascript
python计算对角线有理函数插值的方法
2015/05/07 Python
Python的collections模块中的OrderedDict有序字典
2016/07/07 Python
Python调用ctypes使用C函数printf的方法
2017/08/23 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
Python 使用matplotlib模块模拟掷骰子
2019/08/08 Python
Pytorch 实现计算分类器准确率(总分类及子分类)
2020/01/18 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
基于打开pycharm有带图片md文件卡死问题的解决
2020/04/24 Python
夜大毕业生自我鉴定
2013/10/31 职场文书
信息系统专业个人求职信范文
2013/12/07 职场文书
《水上飞机》教学反思
2014/04/10 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
2015年幼儿园保育工作总结
2015/05/12 职场文书
创业不要错过,这4种餐饮新模式
2019/07/18 职场文书