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

摘要: 点击下拉，再点收回

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