微信小程序实战之自定义抽屉菜单(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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
javascript 数组排序函数
Aug 20 Javascript
30个让人兴奋的视差滚动(Parallax Scrolling)效果网站
Mar 04 Javascript
Node.js安装教程和NPM包管理器使用详解
Aug 16 Javascript
JS 组件系列之Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案
Jun 30 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
Sep 18 Javascript
Vue 2.0入门基础知识之内部指令详解
Oct 15 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
Nov 30 Javascript
微信接入之获取用户头像的方法步骤
Sep 23 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
详解JVM系列之内存模型
Jun 10 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
php生成二维码时出现中文乱码的解决方法
2014/12/18 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP实现验证码校验功能
2017/11/16 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
Thinkphp5框架简单实现钩子(Hook)行为的方法示例
2019/09/03 PHP
Javascript 日期处理之时区问题
2009/10/08 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
最短的javascript:地址栏载入脚本代码
2011/10/13 Javascript
写自已的js类库需要的核心代码
2012/07/16 Javascript
jquery插件star-rating.js实现星级评分特效
2015/04/15 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
很不错的两款Bootstrap Icon图标选择组件
2016/01/28 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
js定义类的几种方法(推荐)
2016/06/08 Javascript
javascript 四十条常用技巧大全
2016/09/09 Javascript
JS函数多个参数默认值指定方法分析
2016/11/28 Javascript
loading动画特效小结
2017/01/22 Javascript
node.js实现复制文本到剪切板的功能
2017/01/23 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
解决VUEX的mapState/...mapState等取值问题
2020/07/24 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python获取本机外网ip的方法
2015/04/15 Python
在Python 2.7即将停止支持时,我们为你带来了一份python 3.x迁移指南
2018/01/30 Python
python中logging包的使用总结
2018/02/28 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
python代码实现将列表中重复元素之间的内容全部滤除
2020/05/22 Python
Django实现后台上传并显示图片功能
2020/05/29 Python
美国孩之宝玩具官网:Hasbro Pulse
2019/06/24 全球购物
10条PHP编程习惯
2014/05/26 面试题
音乐表演专业毕业生求职信
2013/10/14 职场文书
信息与计算科学专业推荐信
2014/02/23 职场文书
乡镇组织委员个人整改措施
2014/09/16 职场文书
2014年信用社工作总结
2014/11/25 职场文书
同学聚会祝酒词
2015/08/10 职场文书