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

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

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绑定

复制代码

wxml中

复制代码

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

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

复制代码

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

复制代码

步骤6 display属性要改为visibility

复制代码

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