Swiper中文论坛

标题: 【首发】小程序弹窗插件wcPop|自定义小程序模态提示框 [打印本页]
作者: xiaoyan2015    时间: 2018-11-21 23:27
标题: 【首发】小程序弹窗插件wcPop|自定义小程序模态提示框
在项目开发过程中，弹窗应用场景随处可见，可以说是贯穿整个项目，纵观各类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. },

  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. },

  25. //信息框
  26. btnTap03: function(e) {
  27. var index = wcPop({
  28.   content: '信息框 （这里演示信息框功能效果，这里演示信息框功能效果，这里演示信息框功能效果）',

  30.   shadeClose: true,
  31.   anim: 'rollIn',
  32.   xclose: true,

  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





欢迎光临 Swiper中文论坛 (http://bbs.swiper.com.cn/) Powered by Discuz! X3.2