微信小程序自定义弹窗wcPop插件|toast信息框|actio
2018-11-18 本文已影响5人
ca5f4c68e450
微信小程序自定义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;}
}