微信小程序自定义弹窗组件showModel|toast信息框
小程序仿微信弹窗效果|微信小程序仿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;}