You can copy and use it directly. This is just a shell. You can fill it with your own content.
Add filter items inpick-header
, add the filtered option content inpick-container
, and display the real content incontent
. The height ofcontent
will be dynamically calculated injs
based on the current mobile phone resolution. The height value iscontentHeight
, so it can be nested inside. Ascroll-view
, set the height tocontentHeight
to achieve content sliding.
Okay, no more nonsense, just look at the picture and the code.
wxml
<view class="content-container"> <view class="pick-header" bindtap="onPickHeaderClick"> 筛选pick-header view z-index:60 </view> <view class="pick-container {{needAnimation ? (openPicker ? 'slidown' : 'slidup') : ''}}" > 筛选项 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>
wxss
/*根布局*/ .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; }
js
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 }) }, })
The above is the detailed content of Example of method to implement WeChat applet drop-down menu (with animation). For more information, please follow other related articles on the PHP Chinese website!