欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  微信小程序

实现微信小程序下拉菜单(带动画)的方法实例

程序员文章站 2022-05-02 22:02:11
...

可以直接拷贝就用,这只是一个壳,可以往里面填充自己的内容

pick-header里添加筛选项,在pick-container添加被筛选的选项内容,content里显示真正的内容。
content的高度是会在js里根据当前手机分辨率所动态计算的,高度值为contentHeight,所以在里面可以嵌套一个scroll-view,设置高度为contentHeight即可实现内容滑动。

好了,废话不多说,直接看图附代码。

实现微信小程序下拉菜单(带动画)的方法实例

下拉菜单示例.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 ? 'slidown' : 'slidup') : ''}}" >
    筛选项 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
    })
  },
})

以上就是实现微信小程序下拉菜单(带动画)的方法实例的详细内容,更多请关注其它相关文章!