小程序教程

微信小程序下拉筛选菜单WXDropDownMenu组件实现下拉动画

字号+ 作者: 来源: 2016-11-23 09:49 我要评论( )

官方文档:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html

改为动画版,需要要满足平移动画与背景遮罩。思路如下:

1.二级菜单初始隐藏且位置位于手机屏幕之外

2.当点击一级菜单时,二级菜单平移向下,直到二级菜单上边缘与一级菜单下边缘平齐。使用linear动画

3.点击自身或其他一级菜单,做逆操作

4.背景遮罩,使用ease-in/ease-out动画

步骤1 改造样式表,top值

步骤2 声明动画

核心代码:

  1.     animation: function(index) {
  2.         // 定义一个动画
  3.         var animation = wx.createAnimation({
  4.             duration: 400,
  5.             timingFunction: 'linear',
  6.         })
  7.         // 是显示还是隐藏
  8.         var flag = this.data.subMenuDisplay[index] == 'show' ? 1 : -1;
  9.         // flag = 1;
  10.         console.log(flag)
  11.         // 使之Y轴平移
  12.         animation.translateY(flag * (initSubMenuHighLight[index].length * 34) + 8).step();
  13.         // 导出到数据,绑定给view属性
  14.         this.setData({
  15.             animationData:animation.export()
  16.         });
  17.     }
复制代码

完成动画后,需调用一次step(),不论是一组还是多组都需要调。

步骤3 声明data数组并与wxml绑定

  1.         animationData: {}
复制代码

wxml中

  1.     <dd animation="{{animationData}}">
复制代码

z-index问题,会挡住一级菜单,设置为-999,可以置于一级菜单之下
使用bottom: 0;初始在一级菜单底边缘平齐。
dl 设置为position: relative; 与二级菜单 position: absolute 对应。

步骤4 点击一级菜单调用动画

  1.         // 设置动画
  2.         this.animation(index);
复制代码

步骤5 点击二级菜单调用动画

  1.         // 设置动画
  2.         this.animation(indexArray[0]);
复制代码

步骤6 display属性要改为visibility

  1. /* 显示与隐藏 */
  2. .show {
  3.     /*display: block;*/
  4.     visibility: visible;
  5. }

  6. .hidden {
  7.     /*display: none;*/
  8.     visibility:hidden;
  9. }
复制代码

保留占位,宽度高度,不然点击没了动画效果。

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 微信小程序 轮播图 swiper图片组件

    微信小程序 轮播图 swiper图片组件

    2016-11-23 09:49

  • 微信小程序 开发 微信开发者工具 快捷键

    微信小程序 开发 微信开发者工具 快捷键

    2016-11-23 09:49

  • 微信小程序 页面跳转 传递参数

    微信小程序 页面跳转 传递参数

    2016-11-23 09:49

  • 微信小程序 如何获取时间

    微信小程序 如何获取时间

    2016-11-23 09:49

网友点评
t