小程序自定义下拉动画的实现方式

—— 2018 ——

01/17

00:00

来源：

作者：未知

栏目：小程序开发

2018/1/17 0:00:00 来源：不详作者：未知

　　小程序中可以自定义设置实现下拉菜单带动画，下面是实现这种形式的方法：

　　在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;

}

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

    })

  },

})

　　以上就是实现微信小程序下拉菜单(带动画)的方法实例的详细内容，希望可以帮助到到大家。

【本站声明】
1、本站文章中所选用的图片及文字来源于网络以及用户投稿，由于未联系到知识产权人或未发现有关知识产权的登记，如有知识产权人并不愿意我们使用，如果有侵权请立即联系。
2、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责，仅系客观性描述，如您需要了解该类商品/服务详细的资讯，请您直接与该类商品/服务的提供者联系。

KESION 科汛软件
KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商，长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。
KESION 不断通过技术创新，提供产品和服务，助力企业向数字化转型，通过科技驱动商业革新，让商业变得更智慧！

▼点击进入科汛官网了解更多

热门标签

微信小程序

上/下篇

蘑菇街小程序电商直播小程序系统开发案例

科汛最新消息，蘑菇街自去年7月21日上线直播板块，一个月内人均播映次数已提升了40%，人均播映时长提升了100%。顺畅的边看边买体会，明显也给高转化做出了贡献。蘑菇街的直播是...

社交电商小程序电商电商小程序电商直播微商 2018/1/17 0:00:00
社交立减金接口哪里设置（非支付渠道）

小程序社交立减金功能实现了商家快速获取社交、裂变传播属性。那么在经营小程序时如何开放社交立减金接口呢。...

营销工具运营SaaS 2018/1/17 0:00:00