微信小程序 -- 自定义底部弹出框（带动画--滑入滑出）

实现这么一个功能，点击选项进行选择，效果是从底部弹出选项框（带滑出动画），选择了某项或者点击其他地方，隐藏（带滑出动画）。效果图如下：

可适用于任何场景，如普通选项（如图）或者类似商城小程序选择商品属性的弹出框。只需要把内容替换自己需要的即可。

1. wxml代码

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

 modal中，蓝色框框起来的，可按需替换。

 2. wxss代码

.arrow{
  display:inline-block;
  border:6px solid transparent;
  border-top-color:#000;
  margin-left:8px;
  position:relative;
  top:6rpx;
}
/* ---------------------------- */
/*模态框*/
.modal{position:fixed; top:0; right:0; bottom:0; left:0; z-index:1000;}
.modal-cancel{position:absolute; z-index:2000; top: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;
}

 如果项目中，多个页面使用了同样效果弹出框，如下的代码可以放到公共样式文件app.wxss中。

 3. js代码

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(),
    })
  },
  
})

如上，用“// ----------------------------------------------------------------------modal”隔开的以下的代码可不需要动。

 

如果一个页面中使用了两个同样效果的弹出框，只需要稍微修改一下就行了，这里就不贴出来。