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

原创
2016/10/19 09:47
阅读数 1.7W

[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,陆续还将推出更多作品。

公众号

展开阅读全文
打赏
0
3 收藏
分享
加载中
更多评论
打赏
0 评论
3 收藏
0
分享
返回顶部
顶部