小程序仿微信弹窗效果|微信小程序仿android、ios弹窗样式
微信小程序自定义模态showModel弹窗实战，很早之前就想写一个小程序自定义弹窗扩展练练手，但是由于时间的关系，一直没有真正的开发（其实就是懒）。好吧，反正最近这段时间稍微比较清闲，趁着这个机会，在空余时间撸了一个自定义model、toast、actionSheet多类型弹窗。

 

 

 

 

 

 

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();
  };

/* __ 自定义样式 */
/* 样式1（toast） */
.popui__toast{background: rgba(17,17,17,.7); border-radius: 12rpx; color: #fff; min-height: 250rpx; width: 250rpx;}
.popui__toast .popui__toast-icon{margin-bottom: 10rpx;}
.popui__toast .popui__toast-icon image{width: 80rpx;}
.popui__toast .popui__panel-cnt{padding: 50rpx 20rpx 20rpx;}
/* 样式2（底部footer弹窗） */
.popui__footer{background: none; margin: 0 auto; max-width: 100%; width: 95%; position: fixed; left: 0; right: 0; bottom: 20rpx;}
.popui__footer .popui__panel-cnt{background-color: rgba(255,255,255,.8); border-radius: 12rpx 12rpx 0 0; padding: 30rpx 20rpx;}
.popui__footer .popui__panel-btn{display: block;}
.popui__footer .popui__panel-btn:after{display: none;}
.popui__footer .popui__panel-btn .btn{background-color: rgba(255,255,255,.8); border-radius: 0;}
.popui__footer .popui__panel-btn .btn:active{background: #d5d5d5;}
.popui__footer .popui__panel-btn .btn:after{display: none;}
.popui__footer .popui__panel-btn .btn:before{content: ''; border-top: 1rpx solid #c5c5c5; color:#c5c5c5; height: 1rpx; position: absolute; top: 0;right: 0;left: 0; transform: scaleY(.5); transform-origin: 0 0;}
.popui__footer .popui__panel-btn .btn:last-child:before{display: none;}
.popui__footer .popui__panel-btn:first-child .btn:first-child{border-radius: 12rpx 12rpx 0 0;}
.popui__footer .popui__panel-btn:first-child .btn:first-child:before{display: none;}
.popui__footer .popui__panel-btn .btn:nth-last-child(2){border-radius: 0 0 12rpx 12rpx;}
.popui__footer .popui__panel-btn .btn:nth-last-child(1){border-radius: 12rpx; margin-top: 20rpx;}
/* 样式3（actionsheet底部弹出式菜单【上-下-左-右】） */
.popui__actionsheet{border-radius: 0; margin: 0 auto; max-width: 100%; width: 100%; position: fixed; left: 0; right: 0; bottom: 0;}
.popui__actionsheet .popui__panel-cnt{padding: 30rpx 20rpx;}
.popui__actionsheet .popui__panel-btn{display: block;}
.popui__actionsheet .popui__panel-btn:after{display: none;}
.popui__actionsheet .popui__panel-btn .btn{border-radius: 0;}
.popui__actionsheet .popui__panel-btn .btn:after{display: none;}
.popui__actionsheet .popui__panel-btn .btn:before{content: ''; border-top: 1rpx solid #d5d5d5; color:#d5d5d5; height: 1rpx; position: absolute; top: 0;right: 0;left: 0; transform: scaleY(.5); transform-origin: 0 0;}
.popui__actionsheet .popui__panel-btn .btn:nth-last-child(1){border-top: 5px solid #d5d5d5;}
/* 样式3-1（actionsheet底部弹出式菜单【仿微信迷你样式】） */
.popui__actionsheetMini{border-radius: 0; margin: 0 auto; max-width: 100%; width: 100%; position: fixed; left: 0; right: 0; bottom: 0;}
.popui__actionsheetMini .popui__panel-cnt{padding: 30rpx 40rpx; text-align: left;}
.popui__actionsheetMini .popui__panel-btn{display: block;}
.popui__actionsheetMini .popui__panel-btn .btn{padding-left: 40rpx; text-align: left;}
.popui__actionsheetMini .popui__panel-btn .btn:after{display: none;}
/* 样式3-2（actionsheet底部弹出式菜单【仿微信weui-picker样式】） */
.popui__actionsheetPicker{border-radius: 0; margin: 0 auto; max-width: 100%; width: 100%; position: fixed; left: 0; right: 0; bottom: 0;}
.popui__actionsheetPicker .popui__panel-tit{font-size: 32rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 150rpx; line-height: 96rpx;}
.popui__actionsheetPicker .popui__panel-cnt{padding: 30rpx 40rpx; text-align: left;}
.popui__actionsheetPicker .popui__panel-btn{display: block; line-height: 96rpx; width: 100%; position: absolute; left: 0; top: 0;}
.popui__actionsheetPicker .popui__panel-btn:after{display: none;}
.popui__actionsheetPicker .popui__panel-btn .btn{border-radius: 0; display: inline-block; padding: 0 40rpx; text-align: left;}
.popui__actionsheetPicker .popui__panel-btn .btn:last-child{float: right;}
.popui__actionsheetPicker .popui__panel-btn .btn:last-child:after{display: none;}