微信小程序CSS3动画下拉菜单

柔光的暖阳◎ 2022-05-22 06:18 197阅读 0赞

**微信小程序没有自带的下拉菜单组件，因此我们需要自己需要写一个**

## 思路 ##

**利用列表来存储菜单项，在外面套一个view元素作为外框，将其设置为overflow：hidden，使用CSS3动画逐渐改变外层view元素的高度，当高度为0时，里面嵌套的列表元素被完全隐藏，相当于菜单关闭。而当view元素的高度大于列表元素的高度时，相当于菜单显示**

## 效果图 ##

![这里写图片描述][70]

wxml  
**button按钮用于触发菜单的打开和关闭，first\_click参数使用户第一次点击按钮之前菜单不可见，state参数用于控制菜单的打开和关闭状态**

css  
**使用@keyframes动画实现菜单的渐变打开和关闭动画**

#box{
      width: 100%;
      border-top: 1px solid #ddd;
      overflow: hidden;
      height: 0;
      animation-fill-mode: forwards;
    }
    
    #item_list{
        background-color: white;
        width: 100%;
    }
    
    #item_list view{
        text-align: right;
        overflow: auto;
        white-space: nowrap;
    }
    
    @keyframes slidedown{
        from {
            height: 0;
        }
        to {
            height: 240rpx;
        }
    }
    
    @keyframes slideup{
        from {
            height: 240rpx;
        }
        to {
            height: 0;
        }
    }
    
    .open{
        animation: slidedown 1s;
    }
    
    .close{
        animation: slideup 1s; 
    }
    
    .hide{
        display: none;
    }
    
    .show{
        display: block;
    }

js  
**页面加载完成时，菜单初始状态为隐藏和关闭，用户一旦点击按钮，菜单就显示，并逐渐打开**

data: {
        state:false,
        first_click:false,
      },
      
     toggle: function(){
          var list_state = this.data.state,
              first_state = this.data.first_click;
          if (!first_state){
              this.setData({
                first_click: true
              });
          }
          if (list_state){
              this.setData({
                state: false
              });
          }else{
              this.setData({
                state: true
              });
          }
      }

--------------------

如果觉得这篇文章帮助了您，请打赏一个小红包鼓励作者继续创作哦！！！

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]

[70]: /images/20220522/eff820e827bf4ce78eac475eca35c29f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3pqd19weXRob24_size_16_color_FFFFFF_t_70_pic_center]: /images/20220522/3841e2edb0cf42b1ad16f3222bad6690.png