实现微信小程序下拉菜单(带动画)的方法实例
程序员文章站
2022-05-02 22:02:11
...
可以直接拷贝就用,这只是一个壳,可以往里面填充自己的内容
在pick-header
里添加筛选项,在pick-container
添加被筛选的选项内容,content
里显示真正的内容。content
的高度是会在js
里根据当前手机分辨率所动态计算的,高度值为contentHeight
,所以在里面可以嵌套一个scroll-view
,设置高度为contentHeight
即可实现内容滑动。
好了,废话不多说,直接看图附代码。
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 }) }, })
以上就是实现微信小程序下拉菜单(带动画)的方法实例的详细内容,更多请关注其它相关文章!
上一篇: Nginx VS HaProxy
下一篇: 深入理解Java Socket通信的分析