【小程序】自定义弹框组件的实现【绝对实用！！！】

自定义弹框组件的实现

话不多说先看效果

初始页面，未点击按钮时：

当点击按钮时：弹框从上至下滑动下面，一个动画过程


点击取消或确定，会向上滑动，直至消失，一个动画过程！！

弹框组件

组件目录文件

代码如下

index.wxml

<view class="pop-box-main {
    {position}}-class" wx:if="{
    {position!='fade' || show}}" animation="{
    {animationData}}" bindanimationend="endFun">
    <view wx:if="{
    {bg}}" class="bg" catchtap="closetag" catchtouchmove="preventTouchMove"></view>
    <slot></slot>
</view>

index.json

{
   
  "component": true, // 开启自定义组件
  "usingComponents": {
   }
}

index.wxss

.pop-box-main {
   
    position: fixed;
    left:0;
    top:0;
    width: 100%;
    height: 100%;
    z-index:12222;
}

.pop-box-main.fade-class {
    opacity:0 }
.pop-box-main.left-class {
    left: -100%; opacity: 0 }
.pop-box-main.top-class {
    top: -100%; opacity: 0   }
.pop-box-main.right-class {
    left: 100%; opacity: 0 }
.pop-box-main.bottom-class {
    top: -100%; opacity: 0 }

.pop-box-main .bg{
   position:absolute; left:0; top:0;width