支付宝小程序自定义弹出对话框插件实现代码

支付宝小程序提供的提醒提示框、对话框、模型弹出窗口功能有限，部分功能无法随意定制修改。如果有，我打包了一个支付宝小程序的自定义弹出插件wcPop，有各种显示场景，随意修改调用。

自定义小程序弹出窗口采用了全新的模板布局和极简api调用方式，解决了自定义弹出窗口出现时屏蔽层下的页面仍然可以滚动的问题。

在原有功能的基础上，增加了如下定位弹出、上、下、左右弹出、弹窗滑动滑动功能

让我们先展示一些弹出的演示图片：

在需要调用弹出插件的页面中引入tpl.js

//信息框btntap03:函数(e){ var index=wcpop({ content : ' information box(在这里，在这里，在这里，在这里)'，shadeClose: true，Anim: ' rollin '，xclose: true，btns3360 [{text:' got it '，style:' color: # 999 '，ontap(){ wcpop . close(index)；Console.log('明白')；} } ] });}，//查询框btntap 043360 function(e){ WCPOP({ Title : ' Tips ~ ~ ~ ~ '，content:' Warning，非法操作非法操作非法操作非法操作！'，shadowclose: false，anim:' shake '，btns3360 [{text:' cancel '，onTap() {console.log('您单击了cancel！');wcpop . close()；} }，{text:' ok '，style: ' color: # 108ee9'，onTap() {console.log('您单击了确定！');} } ] });}，//自定义多按钮btntap05:函数(e){ wcpop({ title : '-支付是一种态度'，content: '。亲爱的用户，我们为您提供了“现金支付”和“微信支付”。请选择您常用的支付方式之一进行支付！'，style : ' border-top :5 px solid # 108 e9；Max-width:90% '，//自定义弹出样式anim3360 '淡入淡出'，opacity:85，btns3360 [{text3360 '微信支付'，style: ' color: # 179b16'，onTap() {console.log('您选择了微信支付！');} }，{text: '支付宝付款'，style: ' color: # 108ee9'，onTap() {console.log('您选择了支付宝支付！');} }，{text:' cancel '，onTap() {console.log('您取消了付款请求！');wcpop . close()；} } ] });}，//底部对话框btntap06:函数(e) {wcpop ({skin:' footer '，content: '您确定要删除此数据吗？数据删除后7天内可以恢复，7天后数据无法恢复！'，anim:' footer '，shadeclose : false，btns3360 [{text:' restore '，style: ' color: # 108ee9'，onTap() {console.log('您单击了还原！');} }，{text:' delete '，style: ' color: # e63d23'，onTap() {console.log('您单击了删除！');//删除回调提示wcpop ({anim: '淡入'，content: '您点击了delete function '，shade: true，time : 3 })；} }，{text:' cancel '，onTap() {console.log('您单击了cancel！');wcpop . close()；} } ] });}，摘要

以上是边肖介绍的支付宝小程序自定义弹出对话框插件的实现代码。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！