uniapp添加自定义底部弹出框

<template>
  <view class="wrap">
    <view @tap="showModal">
      <text>{{value}}</text>
      <icon class="arrow"></icon>
    </view>
  
    <!-- modal  -->
    <view class="modal modal-bottom-dialog" v-show="!hideFlag">
      <view class="modal-cancel" @tap="hideModal"></view>
      <view class="bottom-dialog-body bottom-positon" animation="{{animationData}}">
        <view style="min-height:300px;background-color: #fff;border-radius: 30rpx; height:calc(100vh - 10px);">自定义弹出框内容</view>
      </view>
    </view>
  
  </view>
</template>
<script>
export default{
  data() {
    return {
        optionList:['所有','选项1','选项2'],
        value:'所有',
        hideFlag: true,//true-隐藏  false-显示
        animationData: {},//
    }
  },
  methods: {
    // 点击选项
    getOption(e) {
        this.hideFlag = true
    },
    //取消
    mCancel() {
      this.hideModal();
    },
    // 显示遮罩层
    showModal: function () {
      // 创建动画实例
      let animation = uni.createAnimation({
        duration: 1000,//动画的持续时间
      })
      this.animation = animation; //将animation变量赋值给当前动画
      setTimeout(() => {
          this.hideFlag = false;
          this.slideIn();//调用动画--滑入
      }, 100);
    },
    // 隐藏遮罩层
    hideModal: function () {
      let animation = wx.createAnimation({
        duration: 1000,//动画的持续时间 默认400ms
        timingFunction: 'ease',//动画的效果 默认值是linear
      })
      this.animation = animation
      setTimeout(() => {
        this.hideFlag = true;
        this.slideDown();//调用动画--滑出
      }, 100);
    },
    //动画 -- 滑入
    slideIn: function () {
      this.animation.translateY(0).step() // 在y轴偏移，然后用step()完成一个动画
      //动画实例的export方法导出动画数据传递给组件的animation属性
      this.animationData = this.animation.export();
    },
    //动画 -- 滑出
    slideDown: function () {
      this.animation.translateY(20).step();
      this.animationData = this.animation.export();
    },
  }
}
</script>
<style>
.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;
}
</style>