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

2019独角兽企业重金招聘Python工程师标准>>>

[2016-10-18]

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

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

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

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

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

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

步骤1 改造样式表，top值

步骤2 声明动画

核心代码：

	animation: function(index) {
		// 定义一个动画
	    var animation = wx.createAnimation({
	    	duration: 400,
	        timingFunction: 'linear',
	    })
	    // 是显示还是隐藏
	    var flag = this.data.subMenuDisplay[index] == 'show' ? 1 : -1;
	    // flag = 1;
	    console.log(flag)
	    // 使之Y轴平移
	    animation.translateY(flag * (initSubMenuHighLight[index].length * 34) + 8).step();
	    // 导出到数据，绑定给view属性
	    this.setData({
	    	animationData:animation.export()
	    });
	}

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

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

		animationData: {}

wxml中

	<dd animation="{{animationData}}">

z-index问题，会挡住一级菜单，设置为-999，可以置于一级菜单之下

使用bottom: 0;初始在一级菜单底边缘平齐。

dl 设置为position: relative; 与二级菜单 position: absolute 对应。

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

		// 设置动画
		this.animation(index);

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

		// 设置动画
		this.animation(indexArray[0]);

步骤6 display属性要改为visibility

/* 显示与隐藏 */
.show {
	/*display: block;*/
	visibility: visible;
}

.hidden {
	/*display: none;*/
	visibility:hidden;
}

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

源码下载：关注下方的公众号->回复数字1006

对小程序开发有趣的朋友关注公众号: huangxiujie85，QQ群: 581513218，微信: small_application，陆续还将推出更多作品。

转载于:https://my.oschina.net/huangxiujie/blog/760429