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

实现微信小程序下拉菜单(带动画)的方法实例
可以直接拷贝就用，这只是一个壳，可以往里面填充自己的内容在pickheader里添加筛选项，在pickcontainer添加被筛选的选项内容，content里显示真正的内容。content的高度是会在js里根据当前手机分辨率所动态计算的，高度值为contentHeight，所以在里面可以嵌套一个scrollview，设置高度为contentHeight即可实现内容滑动。好了，废话不多说...
可以直接拷贝就用，这只是一个壳，可以往里面填充自己的内容在pick-header里添加筛选项，在pick-container添加被筛选的选项内容，content里显示真正的内容。content的高度是会在js里根据当前手机分辨率所动态计算的，高度值为contentheight，所以在里面可以嵌套一个scroll-view，设置高度为contentheight即可实现内容滑动。好了，废话不多说，直接看图附代码。

下拉菜单示例.gif

wxml

<view class="content-container"> <view class="pick-header" bindtap="onPickHeaderClick"> 筛选pick-header view z-index:60 </view> <view class="pick-container {{needAnimation ? (openPicker ? &#39;slidown&#39; : &#39;slidup&#39;) : &#39;&#39;}}" > 筛选项 pick-container view z-index:50 </view> <view class="shadow" style="height:{{contentHeight}}px;line-height:{{contentHeight}}px" hidden=" {{!openPicker}}">我是半透明阴影遮罩 view shadow z-index:40</view> <view class="content" style="height:{{contentHeight}}px"> 我是内容content view z-index:20 </view></view>