【首发】小程序弹窗插件wcPop|自定义小程序模态提示框

xiaoyan2015

在项目开发过程中，弹窗应用场景随处可见，可以说是贯穿整个项目，纵观各类app，都有自己的弹窗风格，广告弹窗、信息提示框、询问操作对话框... 之前就有开发过一个h5手机端对话框
最近一直在捣鼓小程序项目，其中也有好些地方都需要用到弹窗插件，自己就寻思着开发个可以共用调用的弹窗插件，经过几天的开发调试，终于搞定(哈皮)
，就有了现在的wcPop小程序弹窗插件。

引入js插件：
import {wcPop} from '../../utils/component/wcPop/tpl.js';
调用方式相当简单(想破了脑袋)

1. /**
   
2. * --------- 小程序弹窗演示函数.Start ---------
   
3. */
   
4. //msg提示
   
5. btnTap01: function(e) {
   
6. wcPop({
   
7.   anim: 'fadeIn',
   
8.   content: '这里是msg提示框测试（5s后窗口关闭）',
   
9.   shade: true,
   
10.   shadeClose: false,
    
11.   time: 5
    
12. });
    
13. },
    
14. 
    
15. //msg提示(黑色背景)
    
16. btnTap02: function(e) {
    
17. wcPop({
    
18.   content: '这里是msg提示框测试（2s后窗口关闭）',
    
19.   shade: false,
    
20.   style: 'background: rgba(17,17,17,.7); color: #fff;',
    
21.   time: 2
    
22. });
    
23. },
    
24. 
    
25. //信息框
    
26. btnTap03: function(e) {
    
27. var index = wcPop({
    
28.   content: '信息框 （这里演示信息框功能效果，这里演示信息框功能效果，这里演示信息框功能效果）',
    
29. 
    
30.   shadeClose: true,
    
31.   anim: 'rollIn',
    
32.   xclose: true,
    
33. 
    
34.   btns: [
    
35.         {
    
36.           text: '知道了',
    
37.           style: 'color: #999',
    
38.           onTap() {
    
39.                 wcPop.close(index);
    
40.                 console.log("知道了");
    
41.           }
    
42.         }
    
43.   ]
    
44. });
    
45. },

复制代码

有需要的朋友可以随时联系我 Q：282310962  wx：xy190310