微信小程序 -实现自定义弹窗组件(modal模态框)

微信小程序自带的弹窗是wx.showModal，但是我发现它扩展能力有限，并不能满足自定义的需求，所以用 css + js封装了一个弹窗组件，效果图如下，附源码。

.wxml文件代码：

<view class="modals" hidden="{{hideModal}}">
	<!-- 遮罩层-->
    <view class="modals-cancel" bindtap="hideModal"></view>
    <view class="bottom-dialog-body bottom-pos" animation="{{animationData}}">
    <view class="modals-content">
    <view class="modals-body-title"></view>
    <view class="modals-option">
    <view class="modals-option-title">开始时间</view>
    <date-piker id="datePikerStart" background timeFormat="YYYY-MM-DD HH:mm" aheadDay="-7" bind:datetimeChange="setStartTime"></date-piker>
    </view>
    <view class="modals-option">
    <view class="modals-option-title">结束时间</view>
    <date-piker id="datePikerEnd"  background timeFormat="YYYY-MM-DD HH:mm" bind:datetimeChange="setEndTime"></date-piker>
    </view>
    <view class="modals-option">
    <view class="modals-option-title">状态</view>
    <picker bindchange="bindPickerChange" value="{{statusIndex}}" range="{{statusArray}}">
    <view class="modals-option-input">
    <text>{{statusArray[statusIndex]}}</text>
    <icon wx:if="{{statusIndex == 0 || statusIndex == 1}}" class="modals-option-clear" type="clear" size="20" catchtap="clearStatus"></icon> 
    </view>
  </picker>
    </view>
    <view class="modals-bottom" bindtap="conditionPushList">查询</view>
    </view>
    </view>
</view>

.wxss文件代码：

.modals{
	position:fixed;
	z-index: 999;
	top:0; 
	left: 0; 
	right:0; 
	bottom: 0;
}
/*遮罩层，层级高于modals层*/
.modals-cancel{
	position:absolute;
	z-index:1000;
	top:0;
	left: 0;
	right:0;
	bottom: 0;
	background-color: rgba(0,0,0,.5);
}
/*弹出层，层级高于遮罩层*/
.bottom-dialog-body{
	position:absolute;
	z-index:10001;
	bottom:0;
	left:0;
	right:0;
	padding:30rpx;
	height:900rpx;
  background-color: #fff;
  border-radius: 60rpx 60rpx 0 0;
}
/*弹出层动画前初始位置,Transform属性应用于元素的2D或3D转换。
这个属性允许你将元素旋转，缩放，移动，倾斜等。translateY(100%)即基于当前位置向下平移100%元素高度*/
.bottom-pos{
	-webkit-transform:translateY(100%);
	transform:translateY(100%);
}
.modals-option {
  margin: 40rpx 0;
}
.modals-option-title {
  margin-bottom:10rpx;
  font-weight: bold;
  padding-left: 10rpx;
}
.modals-option-input {
  height: 2.5em;
  line-height: 2.5em;
  position: relative;
  border-radius: 8px;
  padding: 0 10px;
  background-color: #eee;
  position: relative;
}
.modals-option-clear {
position: absolute;
right: 20rpx;
top: 20rpx;
}
.modals-bottom {
  height: 2.5em;
  line-height: 2.5em;
  position: relative;
  margin-top:70rpx;
  border-radius: 8px;
  text-align: center;
  color:#fff;
  font-size: 18px;
  background-color: #1296db;
}
.modals-content {
  padding: 0 10rpx;
}

.js文件代码：

showModal: function () {
    var that=this;
    that.setData({
      hideModal:false
    })
    //创建一个动画实例 animation
    let animation = wx.createAnimation({
      duration: 600,//动画的持续时间 默认400ms
      timingFunction: 'ease',//动画的效果 默认值是linear
    })
    this.animation = animation 
    setTimeout(function(){
      that.fadeIn();//调用显示动画
    },200)   
  },

  // 隐藏遮罩层
  hideModal: function () {
    let that=this; 
    let animation = wx.createAnimation({
      duration: 400,//动画的持续时间 默认400ms   数值越大，动画越慢   数值越小，动画越快
      timingFunction: 'ease',//动画的效果 默认值是linear
    })
    this.animation = animation
    that.fadeDown();//调用隐藏动画   
    setTimeout(function(){
      that.setData({
        hideModal:true
      })      
    },400)//先执行下滑动画，再隐藏模块
    
  },

  // 向上平移动画
  fadeIn:function(){
    this.animation.translateY(0).step()
    this.setData({
      //动画实例的export方法导出动画数据传递给组件的animation属性
      animationData: this.animation.export()
    })    
  },

  // 向下平移动画
  fadeDown:function(){
    this.animation.translateY(500).step()
    this.setData({
      //导出动画队列。export 方法每次调用后会清掉之前的动画操作。
      animationData: this.animation.export(),  
    })
  },

  // 筛选开始时间
  setStartTime(e) {
    this.setData({
      startTime: e.detail.valueStr
    })
  },

  // 筛选结束时间
  setEndTime(e) {
    this.setData({
      endTime: e.detail.valueStr
    })
  },

   // 清除状态选择
  clearStatus() {
    this.setData({
      statusIndex: 3
    })
  },

  // 切换状态选择
  bindPickerChange(e) {
    this.setData({
      statusIndex : Number(e.detail.value)
    })

  },

  // 按筛选条件查询
  conditionPushList() {
    this.reset()
    this.getDataList()
    this.hideModal()
  },

  // 重置参数
  reset() {
    this.setData({
      pageNum: 0,
      pageSize: 10,
      pushDataList: [],
      bottomOut: false,
      isShow: false
    })
  }