微信小程序实战之自定义抽屉菜单(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 相关文章推荐
将HTML自动转为JS代码
Jun 26 Javascript
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
javascript语言结构小记(一)
Sep 10 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
JavaScript控制table某列不显示的方法
Mar 16 Javascript
jQuery的框架介绍
May 11 Javascript
Vue.js中extend选项和delimiters选项的比较
Jul 17 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
详解微信小程序开发(项目从零开始)
Jun 06 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 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 字符串操作入门教程
2006/12/06 PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
2007/01/02 PHP
phplock(php进程锁) v1.0 beta1
2009/11/24 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
PHP mysqli事务操作常用方法分析
2017/07/22 PHP
利用XMLHTTP传递参数在另一页面执行并刷新本页
2006/10/26 Javascript
XENON基于JSON变种
2010/07/27 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
JavaScript地理位置信息API
2016/06/11 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
jquery实现下拉框左右选择功能
2017/02/21 Javascript
weex里Vuex state使用storage持久化详解
2017/09/09 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
vue在图片上传的时候压缩图片
2020/11/18 Vue.js
[05:05]第三天的dota2
2013/07/29 DOTA
[03:00]2018完美盛典_最佳英雄奖
2018/12/17 DOTA
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
Python随机生成信用卡卡号的实现方法
2015/05/14 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
Win10下安装并使用tensorflow-gpu1.8.0+python3.6全过程分析(显卡MX250+CUDA9.0+cudnn)
2020/02/17 Python
python 安装移动复制第三方库操作
2020/07/13 Python
Python编写memcached启动脚本代码实例
2020/08/14 Python
CSS3实现DIV圆角效果完整代码
2012/10/10 HTML / CSS
塑料制成的可水洗的编织平底鞋和鞋子:Rothy’s
2018/09/16 全球购物
C,C++的几个面试题小集
2013/07/13 面试题
文明学生标兵事迹
2014/01/21 职场文书
中学生演讲稿
2014/04/26 职场文书
党务公开方案
2014/05/06 职场文书
创先争优公开承诺书
2014/08/30 职场文书
董事长秘书岗位职责
2015/02/13 职场文书
圣诞晚会主持词
2015/07/01 职场文书