微信小程序实战之自定义抽屉菜单(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 相关文章推荐
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
jQuery源码分析-03构造jQuery对象-源码结构和核心函数
Nov 14 Javascript
打造个性化的功能强大的Jquery虚拟键盘(VirtualKeyboard)
Oct 11 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)
Oct 28 Javascript
JS排序之快速排序详解
Apr 08 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
Aug 16 Javascript
vue 实现左右拖拽元素并且不超过他的父元素的宽度
Nov 30 Javascript
d3绘制基本的柱形图的实现代码
Dec 12 Javascript
微信小程序中为什么使用var that=this
Aug 27 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
vue实现简易图片左右旋转,上一张,下一张组件案例
Jul 31 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 addslashes 利用递归实现使用反斜线引用字符串
2013/08/05 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
基于JQuery的访问WebService的代码(可访问Java[Xfire])
2010/11/19 Javascript
js中跨域方法原理详解
2015/07/19 Javascript
JavaScript简单判断复选框是否选中及取出值的方法
2015/08/13 Javascript
如何屏蔽防止别的网站嵌入框架代码
2015/08/24 Javascript
jQuery实现为控件添加水印文字效果(附源码)
2015/12/02 Javascript
三种带箭头提示框总结实例
2016/06/14 Javascript
AngularJS页面传参的5种方式
2017/04/01 Javascript
详解JS中的柯里化(currying)
2017/08/17 Javascript
Vue 2.0学习笔记之Vue中的computed属性
2017/10/16 Javascript
JavaScript判断日期时间差的实例代码
2018/03/01 Javascript
Javascript中弹窗confirm与prompt的区别
2018/10/26 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
2018/12/10 Javascript
JavaScript封闭函数及常用内置对象示例
2019/05/13 Javascript
Vue实现导航栏的显示开关控制
2019/11/01 Javascript
Vue使用鼠标在Canvas上绘制矩形
2020/12/24 Vue.js
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python基于回溯法子集树模板解决全排列问题示例
2017/09/07 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
python图片指定区域替换img.paste函数的使用
2020/04/09 Python
pyspark对Mysql数据库进行读写的实现
2020/12/30 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
Monnier Freres中文官网:法国领先的奢侈品配饰在线零售商
2017/11/01 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
总经理助理的职责
2014/03/14 职场文书
人大调研汇报材料
2014/08/14 职场文书
电影地道战观后感
2015/06/04 职场文书
繁星春水读书笔记
2015/06/30 职场文书
运动会广播稿20字
2015/08/19 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
超级实用的公文标题大全!
2019/07/19 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
Win10服务全部禁用了怎么启动?Win10服务全部禁用解决方法
2022/09/23 数码科技