Exemple de méthode pour implémenter le menu déroulant de l'applet WeChat (avec animation)

Vous pouvez le copier et l'utiliser directement. Ceci est juste une coquille. Vous pouvez le remplir avec votre propre contenu

Ajouter des éléments de filtre dans pick-header et l'ajouter. pick-container Le contenu de l'option filtré affiche le contenu réel dans content. La hauteur de
content sera calculée dynamiquement dans js en fonction de la résolution actuelle du téléphone mobile. La valeur de hauteur est contentHeight, vous pouvez donc imbriquer un scroll-view à l'intérieur et définir la hauteur sur contentHeight. . Le glissement du contenu est possible.

D'accord, sans plus tarder, regardez simplement l'image et le code.

Exemple de menu déroulant.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
    })
  },
})

 

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!