微信小程序实战之自定义抽屉菜单(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 相关文章推荐
索趣科技的答案
Feb 07 Javascript
javascript之querySelector和querySelectorAll使用介绍
Dec 20 Javascript
javascript之典型高阶函数应用介绍二
Jan 10 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
javascript实现验证身份证号的有效性并提示
Apr 30 Javascript
js return返回多个值,通过对象的属性访问方法
Feb 21 Javascript
JavaScript的继承实现小结
May 07 Javascript
详解在AngularJS的controller外部直接获取$scope
Jun 02 Javascript
iscroll.js滚动加载实例详解
Jul 18 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
js中延迟加载和预加载的具体使用
Jan 14 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
全国FM电台频率大全 - 16 河南省
2020/03/11 无线电
kohana框架上传文件验证规则写法示例
2014/07/14 PHP
PHP实现可自定义样式的分页类
2016/03/29 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
PHP编程获取各个时间段具体时间的方法
2017/05/26 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
不安全的常用的js写法
2009/09/15 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
在HTML中插入JavaScript代码的示例
2015/06/03 Javascript
浅谈jQuery中的checkbox问题
2016/08/10 Javascript
vue2.0开发实践总结之疑难篇
2016/12/07 Javascript
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
angular 内存溢出的问题解决
2018/07/12 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
jQuery实现的老虎机跑动效果示例
2018/12/29 jQuery
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
2019/01/07 Javascript
vue 地区选择器v-distpicker的常用功能
2019/07/23 Javascript
Vue如何提升首屏加载速度实例解析
2020/06/25 Javascript
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
pandas 选择某几列的方法
2018/07/03 Python
Python 使用类写装饰器的小技巧
2018/09/30 Python
在IPython中进行Python程序执行时间的测量方法
2018/11/01 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
处理python中多线程与多进程中的数据共享问题
2019/07/28 Python
Django DRF认证组件流程实现原理详解
2020/08/17 Python
CSS3教程(6):创建网站多列
2009/04/02 HTML / CSS
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
小学家长会邀请函
2014/01/23 职场文书
社区交通安全实施方案
2014/03/22 职场文书
教师爱岗敬业演讲稿
2014/05/05 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
2015年高二班主任工作总结
2015/05/25 职场文书
利用Python判断你的密码难度等级
2021/06/02 Python
MySQL运行报错:“Expression #1 of SELECT list is not in GROUP BY clause and contains nonaggre”解决方法
2022/06/14 MySQL