支付宝小程序弹窗组件|小程序自定义弹窗插件|alert、/confirm/i、model、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();};// 引入插件jsimport {wcPop} from '../../utils/component/wcPop/tpl.js';Page({ data: { }, onLoad(query) { // 页面加载 console.info(`Page onLoad with query: ${JSON.stringify(query)}`); }, //msg提示 btnTap01: function(e) { wcPop({ anim: 'fadeIn', content: 'msg提示框测试（5s后窗口关闭）', shade: true, shadeClose: false, time: 5 }); }, //msg提示(黑色背景) btnTap02: function(e) { wcPop({ content: 'msg提示框测试（2s后窗口关闭）', shade: false, style: 'background: rgba(17,17,17,.7); color: #fff;', time: 2 }); }, //信息框 btnTap03: function(e) { var index = wcPop({ content: '信息框 （这里演示信息框功能效果，这里演示信息框功能效果，这里演示信息框功能效果）', shadeClose: true, anim: 'rollIn', xclose: true, btns: [ { text: '知道了', style: 'color: #999', onTap() { wcPop.close(index); console.log("知道了"); } } ] }); }, //询问框 btnTap04: function(e) { wcPop({ title: '温馨提示~~~', content: '警告，非法操作非法操作非法操作非法操作非法操作非法操作非法操作！！！', shadeClose: false, anim: 'shake', btns: [ { text: '取消', onTap() { console.log('您点击了取消！'); wcPop.close(); } }, { text: '确定', style: 'color:#108ee9;', onTap() { console.log('您点击了确定！'); } } ] }); }, //自定义多按钮 btnTap05: function(e) { wcPop({ title: '^-^支付是一种态度', content: '尊敬的用户，我们为您提供了“现金支付”和“微信支付两种方式”，请选择一种您的常用支付方式进行支付操作！！！', style: 'border-top:5px solid #108ee9;max-width:90%', //自定义弹窗样式 anim: 'fadeInUp', opacity: .85, btns: [ { text: '微信支付', style: 'color:#179b16;', onTap() { console.log('您选择了微信支付！'); } }, { text: '支付宝支付', style: 'color:#108ee9;', onTap() { console.log('您选择了支付宝支付！'); } }, { text: '取消', onTap() { console.log('您取消了支付请求！'); wcPop.close(); } } ] }); }, //底部对话框 btnTap06: function(e) { wcPop({ skin: 'footer', content: '确定删除该条数据吗？删除后可在7天之内恢复数据，超过7天后数据就无法恢复啦！', anim: 'footer', shadeClose: false, btns: [ { text: '恢复', style: 'color:#108ee9;', onTap() { console.log('您点击了恢复！'); } }, { text: '删除', style: 'color:#e63d23;', onTap() { console.log('您点击了删除！'); //删除回调提示 wcPop({ anim: 'fadeIn', content: '您点击了删除功能', shade: true, time: 3 }); } }, { text: '取消', onTap() { console.log('您点击了取消！'); wcPop.close(); } } ] }); }, })
