实现微信小程序下拉菜单(带动画)的方法实例

<view>  <view>    筛选pick-header view z-index:60  </view>  <view>    筛选项 pick-container view z-index:50  </view>  <view>我是半透明阴影遮罩 view shadow  z-index:40</view>  <view>    我是内容content view z-index:20  </view></view>

/*根布局*/.content-container {width: 100%;position: absolute;}/*筛选头部*/.pick-header {  width: 100%;  height: 72rpx;  z-index: 60;  position: fixed; background-color: lightcoral;}/*筛选项容器布局*/.pick-container {  width: 100%;  height: 300rpx;  background-color: lightgoldenrodyellow;  position: absolute;  z-index: 50;  top: -228rpx;}/*筛选项隐藏 显示动画 start*/@keyframes slidown {  from {    transform: translateY(0%);  }  to {    transform: translateY(100%);  }}.slidown {  display: block;  animation: slidown 0.1s ease-in both;}@keyframes slidup {  from {    transform: translateY(100%);  }  to {    transform: translateY(0%);  }}.slidup {  display: block;  animation: slidup 0.2s ease-in both;}/*筛选项隐藏 显示动画 end*//*筛选项显示出来的时候的阴影*/.shadow {  width: 100%;  background-color: rgba(1, 1, 1, 0.2);  position: absolute;  z-index: 40;  top: 72rpx;}/*内容容器布局*/.content {  width: 100%;  position: absolute;  top: 72rpx;  z-index: 20;}

Page({data: {    openPicker: false,    needAnimation : false,    contentHeight: 0},onLoad: function () {},onReady: function () {    var that = this;    wx.getSystemInfo({        success: function (res) {            that.setData({                //动态根据手机分辨率来计算内容的高度（屏幕总高度-顶部筛选栏的高度）                contentHeight: (res.windowHeight - 72 * res.screenWidth / 750)            });        }    })},onPickHeaderClick: function () {    this.setData({        openPicker: !this.data.openPicker,        needAnimation : true    })  },})