微信小程序实现弹出菜单


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 相关文章推荐
跟着Jquery API学Jquery之一 选择器
Apr 07 Javascript
JavaScript下利用fso判断文件是否存在的代码
Dec 11 Javascript
简单的js表单验证函数
Oct 28 Javascript
AngularJS 2.0新特性有哪些
Feb 18 Javascript
vue实现列表的添加点击
Dec 29 Javascript
JavaScript表单验证的两种实现方法
Feb 11 Javascript
解决VUE框架 导致绑定事件的阻止冒泡失效问题
Feb 24 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
layui实现tab的添加拒绝重复的方法
Sep 04 Javascript
详解js location.href和window.open的几种用法和区别
Dec 02 Javascript
webpack proxy 使用(代理的使用)
Jan 10 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
Nov 17 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获取本周,上周,本月,上月,本季度日期的代码
2009/08/05 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
重载toString实现JS HashMap分析
2011/03/13 Javascript
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
让js弹出窗口居前显示的实现方法
2013/07/10 Javascript
JS将表单导出成EXCEL的实例代码
2013/11/11 Javascript
JQuery文字列表向上滚动的代码
2013/11/13 Javascript
setInterval()和setTimeout()的用法和区别示例介绍
2013/11/17 Javascript
JavaScript插件化开发教程 (四)
2015/01/27 Javascript
jquery中EasyUI实现异步树
2015/03/01 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
2016/05/07 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
js实现简单的获取验证码按钮效果
2017/03/03 Javascript
提高Node.js性能的应用技巧分享
2017/08/10 Javascript
vue引入微信sdk 实现分享朋友圈获取地理位置功能
2019/07/04 Javascript
js实现时间日期校验
2020/05/26 Javascript
jQuery实现查看图片功能
2020/12/01 jQuery
windows下wxPython开发环境安装与配置方法
2014/06/28 Python
python用reduce和map把字符串转为数字的方法
2016/12/19 Python
Python常见读写文件操作实例总结【文本、json、csv、pdf等】
2019/04/15 Python
Selenium基于PIL实现拼接滚动截图
2020/04/10 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
JBL美国官方商店:扬声器、耳机等
2019/12/01 全球购物
到底Java是如何传递参数的?是by value或by reference?
2012/07/13 面试题
网友共享的几个面试题关于Java和Unix等方面的
2016/09/08 面试题
联谊活动策划书
2014/01/26 职场文书
乡镇干部个人对照检查材料思想汇报(原创篇)
2014/09/28 职场文书
2014年车间主任工作总结
2014/12/10 职场文书
行政前台岗位职责
2015/04/16 职场文书
舞出我人生观后感
2015/06/16 职场文书
计算机实训心得体会
2016/01/14 职场文书
八年级作文之友情
2019/11/25 职场文书
python3 实现mysql数据库连接池的示例代码
2021/04/17 Python
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL