小程序上拉菜单

1. 点击更多后上方展示菜单

2. 全屏的遮罩层：z-index小于菜单项

3. 根据shouMenu决定展开的高度，加入动画： transition: all 0.22s;

4. 重点是overflow：hidden, 内容是已经渲染好了，只不过我们高度为0，所以隐藏了，展开的话就是获取内容的高度，显示即可；

<button class="more-btn" bindtap="showMenu">更多
    <view wx:if="{{showMenu}}" class="menuMark" catchtap="closeMenu"/>
</button>
<view class="menu-wrapper" wx:if="{{showMenu}}" style="{{showMenu ? 'height:430rpx;' : '0'}}">
    <view class="menu">
        <button class="menu-item"  bindtap="">取消订单</button>
        <button class="menu-item"  bindtap="">修改订单</button>
        <button class="menu-item"  bindtap="">订单修正</button>
    </view>
</view>

  /** 展开 */
  showMenu() {
    const {
      showMenu
    } = this.data
    this.setData({
      showMenu: !showMenu
    })
  },
  /** 折叠 */
  closeMenu() {
    this.setData({
      showMenu: false
    })
  }

.more-btn{
  color: #be3a34;
  position: relative;
}
.menu-wrapper {
  position: fixed;
  right: 2%;
  bottom: 6.6%;
  width: 32%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 将菜单从底部向上拉出改为从顶部向下拉出 */
  box-shadow:-3px -3px 3px -2px rgba(0, 0, 0, 0.1), 3px -3px 3px -2px rgba(0, 0, 0, 0.1);
  transition: height 1s ease;
  z-index: 100;
  height: 0rpx;
  overflow: hidden;
  transition: all 0.22s;
}

.menu {
  background-color: rgb(248,248,248);
  width: 100% ;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
  padding: 10px 0;
  text-align: center;
  overflow: hidden;
}

.menu-item {
  line-height: 1.5;
  width: 100% !important;
}

.menuMark{
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 59;
}