微信小程序--下拉菜單(帶動畫)實現

能夠直接拷貝就用，這只是一個殼，能夠往裏面填充本身的內容<br /> 在pick-header裏添加篩選項，在pick-container添加被篩選的選項內容，content裏顯示真正的內容。 content的高度是會在js里根據當前手機分辨率所動態計算的，高度值爲contentHeight，因此在裏面能夠嵌套一個scroll-view，設置高度爲contentHeight便可實現內容滑動。<br /> 好了，廢話很少說，直接看圖附代碼。

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
    })
  },
})