微信小程序实现炫酷的弹出式菜单特效


Posted in Javascript onJanuary 28, 2019

今天给大家带来一个微信小程序的弹出是菜单效果,老规矩先上效果图。(录制的gif动画有点卡,实际真机或是模拟器上很顺畅)

微信小程序实现炫酷的弹出式菜单特效

先简单说下思路:

1、首先在屏幕的某个位置放几个悬浮按钮,放几个看你需要的功能

2、点击最上层(wxml中最后一个就是最上层)的的按钮后增加背景遮罩,这个遮罩在我前面自定义modal弹框时有用到

3、分别对按钮做旋转和移动动画和透明度,造成动画差异就是位移的动画距离不同

4、收起的时候回到原来位置并且让透明度变成0就ok了

思路说完了,下面开始上实现代码,这里同样也是封装成了组件,方便调用。

微信小程序实现炫酷的弹出式菜单特效

首先是wxml实现

<view class="drawer_screen" bindtap="showOrHide" wx:if="{{isShow}}" catchtouchmove="myCatchTouch"></view>
<view >
 <image src="../../img/add.png" class="buttom" animation="{{animDelLots}}" bindtap="deleteLots"></image>
 <image src="../../img/add.png" class="buttom" animation="{{animAdd}}" bindtap="add"></image>
 <image src="../../img/add.png" class="buttom" animation="{{animMain}}" bindtap="showOrHide"></image>
</view>

然后是wxss

//悬浮按钮
.buttom{
 width: 100rpx;
 height: 100rpx;
 display: flex;
 flex-direction: row;
 position: fixed;
 bottom:60rpx;
 right: 60rpx;
 z-index: 1001;
}
.drawer_screen {
 width: 100%;
 height: 100%;
 position: fixed;
 top: 0;
 left: 0;
 right:0;
 bottom:0;
 z-index: 1000;
 background: #000;
 opacity: 0.5;
 overflow: hidden;
}
.drawer_box {
 overflow: hidden;
 position: fixed;
 z-index: 1001;
}

json文件

{
 "component": true,
 "usingComponents": {}
}

最后是js逻辑实现

// components/Menu/menu.js
var systemInfo = wx.getSystemInfoSync();
Component({
 /**
 * 组件的属性列表
 */
 properties: {
 
 },
 
 /**
 * 组件的初始数据
 */
 data: {
 isShow: false,//是否已经弹出
 animMain: {},//旋转动画
 animAdd: {},//item位移,透明度
 animDelLots: {},//item位移,透明度
 },
 
 /**
 * 组件的方法列表
 */
 methods: {
 //点击弹出或者收起
 showOrHide: function () {
  if (this.data.isShow) {
  //缩回动画
  this.takeback();
  this.setData({
   isShow: false
  })
  } else {
  //弹出动画
  this.popp();
  this.setData({
   isShow: true
  })
  }
 },
 add: function () {
  this.triggerEvent("addEvent")
  this.showOrHide()
 },
 deleteLots: function () {
  this.triggerEvent("deleteLotsEvent")
  this.showOrHide()
 },
 
 //弹出动画
 popp: function () {
  //main按钮顺时针旋转
  var animationMain = wx.createAnimation({
  duration: 500,
  timingFunction: 'ease-out'
  })
  var animationDelLots = wx.createAnimation({
  duration: 500,
  timingFunction: 'ease-out'
  })
  var animationAdd = wx.createAnimation({
  duration: 500,
  timingFunction: 'ease-out'
  })
  animationMain.rotateZ(180).step();
  animationDelLots.translate(0, -200 / 750 * systemInfo.windowWidth).rotateZ(180).opacity(1).step();
  animationAdd.translate(0, -320 / 750 * systemInfo.windowWidth).rotateZ(180).opacity(1).step();
  this.setData({
  animMain: animationMain.export(),
  animDelLots: animationDelLots.export(),
  animAdd: animationAdd.export(),
  })
 },
 //收回动画
 takeback: function () {
  //main按钮逆时针旋转
  var animationMain = wx.createAnimation({
  duration: 500,
  timingFunction: 'ease-out'
  })
  var animationDelLots = wx.createAnimation({
  duration: 500,
  timingFunction: 'ease-out'
  })
  var animationAdd = wx.createAnimation({
  duration: 500,
  timingFunction: 'ease-out'
  })
  animationMain.rotateZ(0).step();
  animationDelLots.translate(0, 0).rotateZ(0).opacity(0).step();
  animationAdd.translate(0, 0).rotateZ(0).opacity(0).step();
  this.setData({
  animMain: animationMain.export(),
  animDelLots: animationDelLots.export(),
  animAdd: animationAdd.export(),
  })
 }
 },
 //解决滚动穿透问题
 myCatchTouch: function () {
 return
 }
})

在要调用的页面json文件引用menu组件(我这里引用了两个组件,还有一个是前面封装的dialog组件)

"usingComponents": {
 "dialog": "/components/Dialog/dialog",
 "menu": "/components/Menu/menu"
 },

然后在调用的wxml中使用

<!--_addEvent 和 _deleteLotsEvent分别是弹出菜单里面按钮对应的事件,需要在调用的js中实现 -->
<menu hidden id='menu' bind:addEvent="_addEvent" bind:deleteLotsEvent="_deleteLotsEvent" />

调用menu组件的js中实现菜单中item的点击事件

_addEvent: function(){
 //do something
 },
 _deleteLotsEvent: function(){
 //do something
 }

整体代码实现就这么多,代码比较简单,如果有不清楚的童鞋,请留言,我将为你们解答。

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

Javascript 相关文章推荐
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
详解JS函数重载
Dec 04 Javascript
jquery移动端TAB触屏切换实现效果
Dec 22 Javascript
解决angular的post请求后SpringMVC后台接收不到参数值问题的方法
Dec 10 Javascript
浅谈js的html元素的父节点,子节点
Aug 06 Javascript
JS取模、取商及取整运算方法示例
Oct 13 Javascript
vue 里面使用axios 和封装的示例代码
Sep 01 Javascript
利用Three.js如何实现阴影效果实例代码
Sep 26 Javascript
js实现前面自动补全位数的方法
Oct 10 Javascript
element el-input directive数字进行控制
Oct 11 Javascript
Vue-cli3项目引入Typescript的实现方法
Oct 18 Javascript
jQuery实现穿梭框效果
Jan 19 jQuery
微信小程序实现页面浮动导航
Jan 28 #Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 #Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 #Javascript
微信小程序实现顶部导航特效
Jan 28 #Javascript
详解几十行代码实现一个vue的状态管理
Jan 28 #Javascript
vue.js仿hover效果的实现方法示例
Jan 28 #Javascript
vue-for循环嵌套操作示例
Jan 28 #Javascript
You might like
根德YB400的电路分析
2021/03/02 无线电
PHP 一个随机字符串生成代码
2010/05/26 PHP
PHP获取当前执行php文件名的代码
2017/03/02 PHP
php封装的page分页类完整实例代码
2020/02/01 PHP
jquery的ajax和getJson跨域获取json数据的实现方法
2014/02/04 Javascript
jquery提交form表单简单示例分享
2014/03/03 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
解析jQueryEasyUI的使用
2016/11/22 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
利用JS判断客户端类型你应该知道的四种方法
2017/12/22 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
浅析vue中的provide / inject 有什么用处
2019/11/10 Javascript
jQuery实现简单QQ聊天框
2020/08/27 jQuery
Vue和React有哪些区别
2020/09/12 Javascript
python使用clear方法清除字典内全部数据实例
2015/07/11 Python
python中string模块各属性以及函数的用法介绍
2016/05/30 Python
Python迭代和迭代器详解
2016/11/10 Python
非递归的输出1-N的全排列实例(推荐)
2017/04/11 Python
微信跳一跳python自动代码解读1.0
2018/01/12 Python
python关于倒排列的知识点总结
2020/10/13 Python
Anaconda+spyder+pycharm的pytorch配置详解(GPU)
2020/10/18 Python
python subprocess pipe 实时输出日志的操作
2020/12/05 Python
英国领先的NHS批准的在线药店:Pharmacy2U
2017/01/06 全球购物
Kathmandu美国网站:新西兰户外运动品牌
2019/03/23 全球购物
Engel & Bengel官网:婴儿推车、儿童房家具和婴儿设备
2019/12/28 全球购物
PHP如何自定义函数
2016/09/16 面试题
打架检讨书400字
2014/01/17 职场文书
宾馆总经理岗位职责
2014/02/14 职场文书
邻里守望志愿服务活动方案
2014/08/15 职场文书
党委干部批评与自我批评发言稿
2014/09/28 职场文书
2014民事授权委托书范本
2014/09/29 职场文书
2015年党员公开承诺书范文
2015/01/22 职场文书