可以直接拷贝就用,这只是一个壳,可以往里面填充自己的内容
在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 ? '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 }) }, })
以上就是实现微信小程序下拉菜单(带动画)的方法实例的详细内容,更多请关注php中文网其它相关文章!
![php中文网最新课程二维码](/static/images/article_wechat2021.jpg?1111)
声明:本文原创发布php中文网,转载请注明出处,感谢您的尊重!如有疑问,请联系admin@php.cn处理
网友评论
文明上网理性发言,请遵守 新闻评论服务协议
我要评论