微信小程序自定义弹出wcPop插件

微信小程序自定义组件弹出wcPop|小程序消息提示框|吐司自定义模板弹出

通常在开发小程序时，弹出的应用场景相当广泛，但微信官方提供的弹出窗口有局限性，无法自定义修改。这时首先想到的是自定义组件开发，即将弹出框封装成一个组件，然后在多个地方调用。

解决了小程序开发自定义弹出窗口出现后，屏蔽层下的页面仍然可以滚动的方法；将catch touch move=" prevent touch move "添加到遮罩层的最外层视图可以解决遮罩层的点穿透问题。

还可以根据需要自定义多个按钮和事件，还可以像微信安卓、ios一样添加弹出样式；

首先，展示一些小程序弹出组件的演示图：

在需要使用弹出窗口的页面上引入弹出js:

从“”导入{wcPop}././utils/component/WCPoP/TPL . js '；

/* * shade: true，shadeClose: false，time : 5 })；}，//msg提示(黑色背景)btntap02:函数(e) {wcpop ({content3360 '这里是msg提示框测试(2s后窗口关闭)'，shade 3360 false，style : '背景3360rgba (17，17，17，7。color: # fff'，time : { 2 })；}，//信息框btntap03:函数(e){ var index=wcpop({ content : '信息框(这里，这里，这里，这里，这里)'，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 : # 4 ECA 33；'，onTap() {console.log('您单击了确定！');} } ] });}，//自定义多按钮btntap05:函数(e){ wcpop({ title : '-支付是一种态度'，content: '。亲爱的用户，我们为您提供了“现金支付”和“微信支付”。请选择您常用的支付方式之一进行支付！'，style : ' border-top :5 px solid # 4 ECA 33；Max-width:90% '，//自定义弹出样式anim3360 '渐入渐出'，opacity:85，btns3360 [{text3360 '微信支付'，style: ' color: # 4eca33'，onTap() {console.log('您选择了微信支付！');} }，{text: '支付宝付款'，style: ' color: # e63d23'，onTap() {console.log('您选择了支付宝支付！');} }，{text:' cancel '，onTap() {console.log('您取消了付款请求！');wcpop . close()；} } ] });}，摘要

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