微信小程序自定义底部弹出框功能

<view class="wrap">
 <view bindtap="showModal">
 <text>{{value}}</text>
 <icon class="arrow"></icon>
 </view>
 
 <!-- modal -->
 <view class="modal modal-bottom-dialog" hidden="{{hideFlag}}">
 <view class="modal-cancel" bindtap="hideModal"></view>
 <view class="bottom-dialog-body bottom-positon" animation="{{animationData}}">
  <!-- -->
  <view class='Mselect'>
  <view wx:for="{{optionList}}" wx:key="unique" data-value='{{item}}' bindtap='getOption'>
   {{item}}
  </view>
  </view>
  <view></view>
  <view class='Mcancel' bindtap='mCancel'>
  <text>取消</text>
  </view>
 
 </view>
 </view>
 
</view>

.arrow{
 display:inline-block;
 border:6px solid transparent;
 border--color:#000;
 margin-left:8px;
 position:relative;
 :6rpx;
}
/ ---------------------------- /
/模态框/
.modal{position:fixed; :0; right:0; bottom:0; left:0; z-index:1000;}
.modal-cancel{position:absolute; z-index:2000; :0; right:0; bottom: 0; left:0; background:rgba(0,0,0,0.3);}
.bottom-dialog-body{width:100%; position:absolute; z-index:3000; bottom:0; left:0;background:#dfdede;}
/动画前初始位置/
.bottom-positon{-webkit-transform:translateY(100%);transform:translateY(100%);}
 
 
/ 底部弹出框 /
.bottom-positon{
 text-align: center;
}
.Mselect{
 margin-bottom: 20rpx;
}
.Mselect view{
 padding: 26rpx 0;
 background: #fff;
}
.Mselect view:not(:last-of-type){
 border-bottom: 1px solid #dfdede;
}
.Mcancel{
 background: #fff;
 padding: 26rpx 0;
}

Page({
 
 /
  页面的初始数据
 /
 data: {
 optionList:['所有','选项1','选项2'],
 value:'所有',
 
 hideFlag: true,//true-隐藏 false-显示
 animationData: {},//
 },
 // 点击选项
 getOption:function(e){
 var that = this;
 that.setData({
  value:e.currentTarget.dataset.value,
  hideFlag: true
 })
 },
 //取消
 mCancel: function () {
 var that = this;
 that.hideModal();
 },
 
 // ----------------------------------------------------------------------modal
 // 显示遮罩层
 showModal: function () {
 var that = this;
 that.setData({
  hideFlag: false
 })
 // 创建动画实例
 var animation = wx.createAnimation({
  duration: 400,//动画的持续时间
  timingFunction: 'ease',//动画的效果 默认值是linear->匀速，ease->动画以低速开始，然后加快，在结束前变慢
 })
 this.animation = animation; //将animation变量赋值给当前动画
 var time1 = setTimeout(function () {
  that.slideIn();//调用动画--滑入
  clearTimeout(time1);
  time1 = null;
 }, 100)
 },
 
 // 隐藏遮罩层
 hideModal: function () {
 var that = this;
 var animation = wx.createAnimation({
  duration: 400,//动画的持续时间 默认400ms
  timingFunction: 'ease',//动画的效果 默认值是linear
 })
 this.animation = animation
 that.slideDown();//调用动画--滑出
 var time1 = setTimeout(function () {
  that.setData({
  hideFlag: true
  })
  clearTimeout(time1);
  time1 = null;
 }, 220)//先执行下滑动画，再隐藏模块
 
 },
 //动画 -- 滑入
 slideIn: function () {
 this.animation.translateY(0).step() // 在y轴偏移，然后用step()完成一个动画
 this.setData({
  //动画实例的export方法导出动画数据传递给组件的animation属性
  animationData: this.animation.export()
 })
 },
 //动画 -- 滑出
 slideDown: function () {
 this.animation.translateY(300).step()
 this.setData({
  animationData: this.animation.export(),
 })
 },
 
})