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

  14. //msg提示(黑色背景)
  15. btnTap02: function(e) {
  16. wcPop({
  17.   content: '这里是msg提示框测试(2s后窗口关闭)',
  18.   shade: false,
  19.   style: 'background: rgba(17,17,17,.7); color: #fff;',
  20.   time: 2
  21. });
  22. },

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

  27.   shadeClose: true,
  28.   anim: 'rollIn',
  29.   xclose: true,

  30.   btns: [
  31.         {
  32.           text: '知道了',
  33.           style: 'color: #999',
  34.           onTap() {
  35.                 wcPop.close(index);
  36.                 console.log("知道了");
  37.           }
  38.         }
  39.   ]
  40. });
  41. },
复制代码








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






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