微信小程序实现弹出菜单


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 Ajax 实例全解析
Apr 20 Javascript
javascript如何动态加载表格与动态添加表格行
Nov 27 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
js+canvas简单绘制圆圈的方法
Jan 28 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
Angular的$http与$location
Dec 26 Javascript
js 实现复选框只能选择一项的示例代码
Jan 23 Javascript
基于Express框架使用POST传递Form数据
Aug 10 Javascript
Vue中 axios delete请求参数操作
Aug 25 Javascript
微信小程序实现分页加载效果
Nov 19 Javascript
VUE+Element实现增删改查的示例源码
Nov 23 Vue.js
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 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简单提示框alert封装函数
2010/08/08 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
PHP文件打开关闭及读写操作示例解析
2020/08/06 PHP
js实现的复制兼容chrome和IE
2014/04/03 Javascript
有关Promises异步问题详解
2015/11/13 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
基于JavaScript获取鼠标位置的各种方法
2015/12/16 Javascript
jQuery 3.0 的变化及使用方法
2016/02/01 Javascript
Angularjs使用ng-repeat中$even和$odd属性的注意事项
2016/12/31 Javascript
JavaScript 动态三角函数实例详解
2017/01/08 Javascript
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
bootstrap table插件的分页与checkbox使用详解
2017/07/23 Javascript
在 Angular 中使用Chart.js 和 ng2-charts的示例代码
2017/08/17 Javascript
jquery实现楼层滚动效果
2018/01/01 jQuery
页面点击小红心js实现代码
2018/05/26 Javascript
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
2018/08/22 Javascript
es6 symbol的实现方法示例
2019/04/02 Javascript
vue elementui el-form rules动态验证的实例代码详解
2019/05/23 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
2020/11/06 Javascript
[02:38]DOTA2超级联赛专访Loda 认为IG世界最强
2013/05/27 DOTA
[38:51]2014 DOTA2国际邀请赛中国区预选赛 Orenda VS LGD-CDEC
2014/05/22 DOTA
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
浅析Python中的join()方法的使用
2015/05/19 Python
使用Python读取大文件的方法
2018/02/11 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
Python中的字符串切片(截取字符串)的详解
2019/05/15 Python
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
JAVA中的关键字有什么特点
2014/03/07 面试题
开展党的群众路线教育实践活动情况汇报
2014/11/05 职场文书
三潭印月的导游词
2015/02/12 职场文书
给校长的建议书作文400字
2015/09/14 职场文书
只用20行Python代码实现屏幕录制功能
2021/06/02 Python
python三子棋游戏
2022/05/04 Python