可以直接拷貝就用,這只是一個殼,可以往裡面填充自己的內容
在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 }) }, })
###
以上是實作微信小程式下拉選單(帶動畫)的方法實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!