微信小程序实战之自定义抽屉菜单(7)


Posted in Javascript onApril 18, 2017

微信提供了动画api,就是下面这个

微信小程序实战之自定义抽屉菜单(7)

相关链接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject

通过使用这个创建动画的api,可以做出很多特效出来

下面介绍一个抽屉菜单的案例

实现代码:
wxml:

<!--button--> 
<view class="btn" bindtap="powerDrawer" data-statu="open">button</view> 
<!--mask--> 
<view class="drawer_screen" bindtap="powerDrawer" data-statu="close" wx:if="{{showModalStatus}}"></view> 
<!--content--> 
<!--使用animation属性指定需要执行的动画--> 
<view animation="{{animationData}}" class="drawer_attr_box" wx:if="{{showModalStatus}}"> 
 <!--drawer content--> 
 <view class="drawer_content"> 
 <view class="drawer_title line">菜单1</view> 
 <view class="drawer_title line">菜单2</view> 
 <view class="drawer_title line">菜单3</view> 
 <view class="drawer_title line">菜单4</view> 
 <view class="drawer_title">菜单5</view> 
 </view> 
</view>

wxss:

/*button*/ 
.btn { 
 width: 80%; 
 padding: 20rpx 0; 
 border-radius: 10rpx; 
 text-align: center; 
 margin: 40rpx 10%; 
 background: #0C1939; 
 color: #fff; 
} 
/*mask*/ 
.drawer_screen { 
 width: 100%; 
 height: 100%; 
 position: fixed; 
 top: 0; 
 left: 0; 
 z-index: 1000; 
 background: #000; 
 opacity: 0.2; 
 overflow: hidden; 
} 
/*content*/ 
.drawer_attr_box { 
 width: 100%; 
 overflow: hidden; 
 position: fixed; 
 bottom: 0; 
 left: 0; 
 z-index: 1001; 
 background: #fff; 
} 
.drawer_content { 
 padding: 20rpx 40rpx; 
 height: 470rpx; 
 overflow-y: scroll; 
} 
.drawer_title{ 
 padding:20rpx; 
 font:42rpx "microsoft yahei"; 
 text-align: center; 
} 
.line{ 
 border-bottom: 1px solid #f8f8f8; 
}

js:

Page({ 
 data: { 
 showModalStatus: false 
 }, 
 powerDrawer: function (e) { 
 var currentStatu = e.currentTarget.dataset.statu; 
 this.util(currentStatu) 
 }, 
 util: function(currentStatu){ 
 /* 动画部分 */ 
 // 第1步:创建动画实例 
 var animation = wx.createAnimation({ 
  duration: 200, //动画时长 
  timingFunction: "linear", //线性 
  delay: 0 //0则不延迟 
 }); 
  
 // 第2步:这个动画实例赋给当前的动画实例 
 this.animation = animation; 
 
 // 第3步:执行第一组动画:Y轴偏移240px后(盒子高度是240px),停 
 animation.translateY(240).step(); 
 
 // 第4步:导出动画对象赋给数据对象储存 
 this.setData({ 
  animationData: animation.export() 
 }) 
  
 // 第5步:设置定时器到指定时候后,执行第二组动画 
 setTimeout(function () { 
  // 执行第二组动画:Y轴不偏移,停 
  animation.translateY(0).step() 
  // 给数据对象储存的第一组动画,更替为执行完第二组动画的动画对象 
  this.setData({ 
  animationData: animation 
  }) 
  
  //关闭抽屉 
  if (currentStatu == "close") { 
  this.setData( 
   { 
   showModalStatus: false 
   } 
  ); 
  } 
 }.bind(this), 200) 
 
 // 显示抽屉 
 if (currentStatu == "open") { 
  this.setData( 
  { 
   showModalStatus: true 
  } 
  ); 
 } 
 } 
})

微信小程序实战之自定义抽屉菜单(7)

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

Javascript 相关文章推荐
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
JS实现点击按钮控制Div变宽、增高及调整背景色的方法
Aug 05 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
jQuery如何使用自动触发事件trigger
Nov 29 Javascript
深入理解setTimeout函数和setInterval函数
May 20 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
微信小程序开发中var that =this的用法详解
Jan 18 Javascript
微信小程序--onShareAppMessage分享参数用处(页面分享)
Apr 18 #Javascript
微信小程序实战之自定义toast(6)
Apr 18 #Javascript
Jquery-data的三种用法
Apr 18 #jQuery
微信小程序实战之登录页面制作(5)
Mar 30 #Javascript
Angular2数据绑定详解
Apr 18 #Javascript
微信小程序教程系列之设置标题栏和导航栏(7)
Jun 29 #Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 #Javascript
You might like
重新封装zend_soap实现http连接安全认证的php代码
2011/01/12 PHP
php中获得视频时间总长度的另一种方法
2011/09/15 PHP
PHP使用SOAP调用.net的WebService数据
2013/11/12 PHP
php通过array_shift()函数移除数组第一个元素的方法
2015/03/18 PHP
apache和PHP如何整合在一起
2015/10/12 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
javascript自执行函数之伪命名空间封装法
2010/12/25 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
node+express+ejs制作简单页面上手指南
2014/11/26 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
Jquery中巧用Ajax的beforeSend方法
2016/01/20 Javascript
原生js 封装get ,post, delete 请求的实例
2017/08/11 Javascript
新手vue构建单页面应用实例代码
2017/09/18 Javascript
AngularJS实现图片上传和预览功能的方法分析
2017/11/08 Javascript
js 提取某()特殊字符串长度的实例
2017/12/06 Javascript
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
cdn模式下vue的基本用法详解
2018/10/07 Javascript
cordova+vue+webapp使用html5获取地理位置的方法
2019/07/06 Javascript
python开发之thread线程基础实例入门
2015/11/11 Python
Python如何为图片添加水印
2016/11/25 Python
Python统计时间内的并发数代码实例
2019/12/28 Python
Python sqlite3查询操作过程解析
2020/02/20 Python
浅谈python元素如何去重,去重后如何保持原来元素的顺序不变
2020/02/28 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
python3实现简单飞机大战
2020/11/29 Python
PyTorch 中的傅里叶卷积实现示例
2020/12/11 Python
HTML5之SVG 2D入门3—文本与图像及渲染文本介绍
2013/01/30 HTML / CSS
COS美国官网:知名服装品牌
2019/04/08 全球购物
Python的两道面试题
2013/06/29 面试题
学习焦裕禄精神践行三严三实心得体会
2014/10/13 职场文书
实习计划书范文
2015/01/16 职场文书
Vue自定义铃声提示音组件的实现
2022/01/22 Vue.js
一次Mysql update sql不当引起的生产故障记录
2022/04/01 MySQL