Beispiel einer Methode zur Implementierung des WeChat-Applet-Dropdown-Menüs (mit Animation)

Sie können es kopieren und direkt verwenden. Sie können es mit Ihren eigenen Inhalten füllen

Filterelemente in pick-header hinzufügen pick-container Der gefilterte Optionsinhalt zeigt den tatsächlichen Inhalt in content an. Die Höhe von
content wird dynamisch in js basierend auf der aktuellen Mobiltelefonauflösung berechnet. Der Höhenwert ist contentHeight, sodass Sie ein scroll-view darin verschachteln und die Höhe auf contentHeight festlegen können , das heißt, das Verschieben von Inhalten ist möglich.

Okay, ohne weitere Umschweife, schauen Sie sich einfach das Bild und den Code an.

Dropdown-Menü example.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 ? &#39;slidown&#39; : &#39;slidup&#39;) : &#39;&#39;}}" >
    筛选项 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
    })
  },
})

 

Das obige ist der detaillierte Inhalt vonBeispiel einer Methode zur Implementierung des WeChat-Applet-Dropdown-Menüs (mit Animation). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!