微信小程序自定义弹窗wcPop插件|toast信息框|actio

微信小程序自定义model模态弹窗|actionSheet弹窗|toast自定义图标信息框

微信小程序自定义弹窗实战——wcPop插件，很早之前就想写一个小程序自定义弹窗扩展练练手，但是由于时间的关系，一直没有真正的开发（其实就是懒）。好吧，反正最近这段时间稍微比较清闲，趁着这个机会，开发了这个多功能类型弹窗。

var util = {
    extend: function (target, source){
      for (var i in source) {
        if (!(i in target)) {
          target[i] = source[i];
        }
      }
      return target;
    },
    timer: {}, // 定时器
    show: {}, // 弹窗显示后回调函数
    end: {} // 弹窗销毁后回调函数
    ,
    // 方向检测
    direction: function(x1,x2,y1,y2){
      return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'left' : 'right') : (y1 - y2 > 0 ? 'up' : 'down')
    }
    ,
    // 位置检测（屏幕四周）
    chkPosition: function (pageX, pageY, domWidth, domHeight, windowWidth, windowHeight){
      var _left = (pageX + domWidth) > windowWidth ? (pageX - domWidth) : pageX;
      var _top = (pageY + domHeight) > windowHeight ? (pageY - domHeight) : pageY;
      var dpr = 750/windowWidth;
      return [_left*dpr, _top*dpr];
    }
  },
  wcPop = function(options){
    __this = getCurrentPages()[getCurrentPages().length - 1]; //获取当前page实例(跨页面挂载)

    var that = this,
      config = {
        id: 'wcPop',                //弹窗ID标识 (不同ID对应不同弹窗)

        title: '',                  //标题
        content: '',                //内容 - ###注意：引入自定义弹窗模板 content: ['tplTest01']  tplTest01为模板名称(在插件目录template页面中配置)
        style: '',                  //自定弹窗样式
        skin: '',                   //自定弹窗显示风格 ->目前支持配置  toast(仿微信toast风格)、footer(底部对话框风格)、actionsheet(底部弹出式菜单)、ios|android(仿微信样式)
        icon: '',                   //弹窗小图标(success | info | error | loading)

        shade: true,                //是否显示遮罩层
        shadeClose: true,           //是否点击遮罩时关闭层
        opacity: '',                //遮罩层透明度
        xclose: false,              //自定义关闭按钮(默认右上角)

        anim: 'scaleIn',            //scaleIn：缩放打开(默认)  fadeIn：渐变打开  fadeInUpBig：由上向下打开 fadeInDownBig：由下向上打开  rollIn：左侧翻转打开  shake：震动  footer：底部向上弹出
        position: '',               //弹窗显示位置(top | right | bottom | left)
        follow: null,               //跟随定位（适用于长按跟随定位）
        time: 0,                    //设置弹窗自动关闭秒数1、 2、 3

        touch: null,                //触摸函数 参数：[ {direction:'left|right|up|down', fn(){}} ]
        btns: null                  //不设置则不显示按钮，btn参数: [{按钮1配置}, {按钮2配置}]
      };

    that.opts = util.extend(options, config);
    that.init();
  };

/* __ 弹窗动画 */
.anim-fadeIn{animation: anim-fadeIn .5s;}
.anim-scaleIn{animation: anim-scaleIn .3s;}
.anim-fadeInUp{animation: anim-fadeInUp .3s;}
.anim-fadeInDown{animation: anim-fadeInDown .3s;}
.anim-fadeOutUp{animation: anim-fadeOut .3s;}
.anim-fadeOut{animation: anim-fadeOut .3s;}
.anim-ScaleOut{animation: anim-ScaleOut .3s;}
.anim-rollIn{animation: anim-rollIn .3s;}
.anim-shake{animation: anim-shake .3s;}
.anim-loading{animation: anim-loading 1.5s steps(12, end) infinite;}
.anim-footer{animation: anim-footer .3s;}
/* 全屏显示动画(上、右、下、左) */
.anim-fadeInDownBig{animation: anim-fadeInDownBig .3s;}
.anim-fadeInRightBig{animation: anim-fadeInRightBig .3s;}
.anim-fadeInUpBig{animation: anim-fadeInUpBig .3s;}
.anim-fadeInLeftBig{animation: anim-fadeInLeftBig .3s;}
/* position优先级高于自定义动画（如果定义了position则会覆盖掉其他动画） */
.popui__panel-child.top,
.popui__panel-child.right,
.popui__panel-child.bottom,
.popui__panel-child.left{
    border-radius: 0; margin:0 auto; max-width: 100%; position: fixed; left: 0; right: 0; bottom: 0; width: 100%;
}
.popui__panel-child.top{top:0;bottom:auto; animation: anim-fadeInDownBig .3s;}
.popui__panel-child.right{top:0;left:auto; width:80%; animation: anim-fadeInRightBig .3s;}
.popui__panel-child.bottom{animation: anim-fadeInUpBig .3s;}
.popui__panel-child.left{top:0;right:auto; width:80%; animation: anim-fadeInLeftBig .3s;}

/* 渐变 */
@keyframes anim-fadeIn {
    0% {opacity: 0;}
    100% {opacity: 1;}
}
/* 缩放 */
@keyframes anim-scaleIn {
    0% {opacity: 0; transform: scale(.9);}
    100% {opacity: 1; transform: scale(1);}
}
/* 由上向下打开 */
@keyframes anim-fadeInUp {
    0% {opacity: 0; transform: translateY(-100%);}
    100% {opacity: 1; transform: translateY(0);}
}
/* 由下向上打开 */
@keyframes anim-fadeInDown {
    0% {opacity: 0; transform: translateY(100%);}
    100% {opacity: 1; transform: translateY(0);}
}
/* 由上向下渐变关闭 */
@keyframes anim-fadeOutUp {
    100% {opacity: 0; transform: translateY(100%);}
}
/* 渐变缩小关闭 */
@keyframes anim-fadeOut {
    100% {opacity: 0;}
}