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

自定义弹框组件的实现

话不多说先看效果

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

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


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

弹框组件

组件目录文件

代码如下

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:100%; height:100%; background:rgba(0,0,0,0.6); z-index: 1}
.pop-box-main .main{position: relative; width:100%; top:0; left:0; z-index:3;}
.pop-box-main view{position: relative; z-index: 2;}

index.js

//Component Object
Component({
  properties: { // 组件的对外属性，是属性名到属性设置的映射表
      position: {
        type: String,
        value: 'fade',
    },
    show: {
        type: Boolean,
        value: false
    },
    bg: {
        type: Boolean,
        value: true,
    },
    bgclick: {
        type: Boolean,
        value: true,
    }
  },
  data: { // 组件的内部数据，和 properties 一同用于组件的模板渲染
      animationData: {}
  },
  observers: { // 组件数据字段监听器，用于监听 properties 和 data 的变化
      'show': function(val) {
        let animation = wx.createAnimation({
            duration: 200, // 动画持续时间
            timingFunction: 'linear' // 动画效果，从头到尾速度相同
        })
        if(val){
            animation.opacity(1).left(0).top(0).step();
            this.setData({
                animationData: animation.export() // 导出动画队列。export 方法每次调用后会清掉之前的动画操作。
            })
        }else{
            switch (this.properties.position) {
                case 'fade':
                    animation.opacity(0).step(); // 表示一组动画完成。可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画
                    break;
                case 'left':
                    animation.left('-100%').step(); // left 设置left值
                    break;
                case 'top':
                    animation.top('-100%').step(); // top 设置top值
                    break;
                case 'right':
                    animation.left('100%').step(); // opacity 设置透明度
                    break;
                default:
                    animation.top('100%').step();
                    break;
            }
            this.setData({
                animationData:animation.export()
            })
        }
    }
  },
  pageLifetimes: { // 组件所在页面的生命周期声明对象
    show() {

    },
    hide() {

    },
    resize(size) {
      // 页面尺寸变化
    }
  },
  methods: {
    // 点击背景
    closetag() {
      if(this.properties.bgclick) {
        this.setData({
          show: false
        })
        this.triggerEvent('close', {
          bb:1
        })
      }
    },
    // 防止滑动穿透
    preventTouchMove() {
      console.log('stop');
      return
    },
    closePop() {
      this.setData({
        show: false
      })
    },
    endFun() {
      console.log('end')
    }
  }

});

在/Page/index下使用

目录文件

代码如下

index.html

<button bindtap="show">
   弹出自定义组件框
</button>

<popup position="top" show="{{showPic}}">
  <view class="pop-main">
      <view class="tit">
          美丽的小丽
      </view>
      <view class="image">
          <image src="../../images/jg.jpg" mode="aspectFit"></image>
      </view>
      <view class="bottom">
           <view class="text"><text bindtap="cancelPop">取消</text></view>
           <view class="text"><text bindtap="confirmPop">确定</text></view>
      </view>
  </view>
</popup>

{
  "usingComponents": {
    "popup": "../../components/popup/index"
  }
}

/* pages/index/index.wxss */
.pop-main { /* 整体框架 */
  background: #fff;
  width:70%;
  min-height: 200rpx;
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
}

.pop-main .tit{ /* 标题 */
  height: 40%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 38rpx;
  border-bottom: 1px solid #ccc;
}

.pop-main .image image{
  width: 100%;
}

.pop-main .bottom{  /* 底部按钮 */
  width: 100%;
  display: flex;
  justify-content: space-around;
}

.pop-main .text{
  font-size: 32rpx;
  width: 40%;
  height: 80rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  color: palevioletred;
}

// pages/index/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
     showPic: false
  },

  show: function() { // 点击弹框
     this.setData({
       showPic: true
     })
  },
  cancelPop: function(e) { // 取消
    this.setData({
      showPic: false
    })
  },
  confirmPop: function() { // 确定
     this.setData({
       showPic: false
     })
  }

})

PS:补充一些知识点

组件

定义自定义组件，首选需要在.json文件中进行自定义组件的声明，将 component 字段设为 true

{
    "component": true,
    "usingComponents": {}
}

动画