微信小程序自定义模态弹窗(wcPop)|多种弹窗样式

原创

andy2018

修改于 2018-11-19 10:54:06

12.5K3

修改于 2018-11-19 10:54:06

文章被收录于专栏：h5h5

【首发】微信小程序自定义弹窗增强版|仿微信弹窗样式|toast自定义图标弹窗|微信小程序底部弹窗

在平时微信小程序开发中，弹窗应用场景还是蛮广泛的，如果你刚好项目开发中用到的话，希望对你有用~

很早之前就想写一个小程序自定义弹窗扩展练练手，但是由于时间的关系，一直没有真正的开发（其实就是懒）。

好吧，反正最近这段时间稍微比较清闲，趁着这个机会，在空余时间撸了一个自定义模态showModel弹窗。

实际上demo效果图很多，挑了几个

在页面引入插件：import {wcPop} from '../../utils/component/wcPop/tpl.js';

/* 调用方式相当方便 */

  //msg提示
  btnTap01: function(e) {
    wcPop({
      anim: 'fadeIn',
      content: '这里是msg提示框测试（5s后窗口关闭）',
      shade: true,
      shadeClose: false,
      time: 5
    });
  },

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

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

      shadeClose: true,
      anim: 'rollIn',
      xclose: true,

      btns: [
        {
          text: '知道了',
          style: 'color: #999',
          onTap() {
            wcPop.close(index);
            console.log("知道了");
          }
        }
      ]
    });
  },

  //询问框
  btnTap04: function(e) {
    wcPop({
      title: '温馨提示~~~',
      content: '警告，非法操作非法操作非法操作非法操作非法操作非法操作非法操作！！！',
      shadeClose: false,
      anim: 'shake',

      btns: [
        {
          text: '取消',
          onTap() {
            console.log('您点击了取消！');
            wcPop.close();
          }
        },
        {
          text: '确定',
          style: 'color:#4eca33;',
          onTap() {
            console.log('您点击了确定！');
          }
        }
      ]
    });
},

// 内置多种配置参数

  wcPop = function(options){
    __this = getCurrentPages()[getCurrentPages().length - 1]; //获取当前page实例(跨页面挂载)

    var that = this,
      config = {
        id: 'wcPop',				//弹窗ID标识 (不同ID对应不同弹窗)

        title: '',				  	//标题
        content: '',			  	//内容 - ###注意：引入自定义弹窗模板 content: ['tplTest01']  tplTest01为模板名称(在插件目录template页面中配置)
        style: '',					//自定弹窗样式
        skin: '',					//自定弹窗显示风格 ->目前支持配置  toast(仿微信toast风格)、footer(底部对话框风格)、actionsheet(底部弹出式菜单)、ios|android(仿微信样式)
        icon: '',					//弹窗小图标(success | info | error | loading)

        shade: true,				//是否显示遮罩层
        shadeClose: true,			//是否点击遮罩时关闭层
        opacity: '',				//遮罩层透明度
        xclose: false,				//自定义关闭按钮(默认右上角)

        anim: 'scaleIn',			//scaleIn：缩放打开(默认)  fadeIn：渐变打开  fadeInUpBig：由上向下打开 fadeInDownBig：由下向上打开  rollIn：左侧翻转打开  shake：震动  footer：底部向上弹出
        position: '',				//弹窗显示位置(top | right | bottom | left)
        follow: null,       		//跟随定位（适用于长按跟随定位）
        time: 0,					//设置弹窗自动关闭秒数1、 2、 3

        touch: null,        		//触摸函数 参数：[ {direction:'left|right|up|down', fn(){}} ]
        btns: null					//不设置则不显示按钮，btn参数: [{按钮1配置}, {按钮2配置}]
      };

    that.opts = util.extend(options, config);
    that.init();
  };