WeChat 애플릿 드롭다운 메뉴 구현 방법의 예(애니메이션 포함)

직접 복사해서 사용하시면 됩니다. 이건 그냥 셸에 불과합니다.

pick-header에 필터 항목을 추가하고 추가하시면 됩니다. pick-container 필터링된 옵션 내용은 content의 실제 내용을 표시합니다.
content의 높이는 현재 휴대폰 해상도를 기준으로 js에서 동적으로 계산됩니다. 높이 값은 contentHeight이므로 내부에 scroll-view을 중첩하고 높이를 contentHeight로 설정할 수 있습니다. , 즉 컨텐츠 슬라이딩이 가능합니다.

자, 더 이상 고민하지 말고 사진과 코드만 보세요.

드롭다운 메뉴 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

아아아아

  

위 내용은 WeChat 애플릿 드롭다운 메뉴 구현 방법의 예(애니메이션 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!