微信小程序实战之自定义抽屉菜单(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 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
JavaScript confirm选择判断
Oct 18 Javascript
jquery tablesorter.js 支持中文表格排序改进
Dec 09 Javascript
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
Sep 28 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
js实现上一页下一页的效果【附代码】
Mar 10 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
Jul 18 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
深入浅析javascript继承体系
Oct 23 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 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
PHP+SQL 注入攻击的技术实现以及预防办法
2011/01/27 PHP
jQuery EasyUI API 中文文档 - DateBox日期框
2011/10/15 PHP
PHP实现文件下载详解
2014/11/27 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
详解php curl带有csrf-token验证模拟提交方法
2018/04/18 PHP
基于javascript 闭包基础分享
2013/07/10 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
JavaScript中toString()方法的使用详解
2015/06/05 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
浅谈JavaScript的全局变量与局部变量
2016/06/10 Javascript
TypeScript入门-基本数据类型
2017/03/28 Javascript
JavaScript实现区块链
2018/03/14 Javascript
vue 利用路由守卫判断是否登录的方法
2018/09/29 Javascript
如何用RxJS实现Redux Form
2018/12/29 Javascript
详解a标签添加onclick事件的几种方式
2019/03/29 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
通过Python使用saltstack生成服务器资产清单
2016/03/01 Python
Python3使用requests发闪存的方法
2016/05/11 Python
Python实现string字符串连接的方法总结【8种方式】
2018/07/06 Python
python 获取utc时间转化为本地时间的方法
2018/12/31 Python
django主动抛出403异常的方法详解
2019/01/04 Python
pyqt5实现登录界面的模板
2020/05/30 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
让IE6、IE7、IE8支持CSS3的脚本
2010/07/20 HTML / CSS
程序员岗位职责
2013/11/11 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
高中学校对照检查材料
2014/08/31 职场文书
党政领导班子群众路线对照检查材料思想汇报
2014/09/27 职场文书
不尊敬老师的检讨书
2014/12/21 职场文书
2015年保洁工作总结范文
2015/04/28 职场文书
篮球比赛通讯稿
2015/07/18 职场文书
《多彩的民间艺术》教学反思
2016/02/16 职场文书
Nginx禁止ip访问或非法域名访问
2022/04/07 Servers