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

【首发】微信小程序自定义弹窗增强版|仿微信弹窗样式|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();
  };

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏从零开始学 Web 前端

从零开始学 Web 之 移动Web(五)touch事件的缺陷,移动端常用插件

我们在上面《页面分类》的项目中,对 tap 事件的处理使用的是 touch 事件处理的,因为如果使用 click 事件的话,总会有延时。

16520
来自专栏Web 开发

使用jQuery.data()查看元素上绑定的事件

最近遇到一个诡异的问题,发现我添加在一个HTMLElement片段上面的事件绑定,会在后续的流程中,无故丢失了。但是,我不知道它是什么时候丢失的。

9700
来自专栏Youngxj

bootstrap简洁居中毛玻璃登录源码

51650
来自专栏Android-薛之涛

Android - 自定义View,实现不一样的输入框

最近看到一个效果,就是在登陆界面输入账号密码的时候,会有一个动画效果,感觉不错,找了一些资料,学习了一下。已经实现效果,效果如下:

48420
来自专栏每日一篇技术文章

weex-15-组件web的使用

当我们单击一个按钮打开一个新的网页的时候,如何返回前一个页面呢?我们带着疑问来继续今天的内容

42020
来自专栏ytkah

微信小程序开发教程第八章:微信小程序分组开发与左滑功能实现

先来看看今天的整体思路: 进入分组管理页面-->点击新建分组新建 进入到未分组页面基本操作 进入到已建分组里面底部菜单栏操作-->从名片夹中添加进行操作。 ? ...

39340
来自专栏Google Dart

AngularDart Material Design 应用布局 顶

应用布局 应用程序布局是一个样式,指令和组件系统,当它们一起使用时,可以提供材质外观和感知应用程序的层叠关系。 它根据材料规格提供应用栏,抽屉和导航样式。

20330
来自专栏IMWeb前端团队

chrome开发者工具小技巧

Chrome 开发者工具是一款Web开发者们公认的优秀的前端调试工具,本身功能强大,有了这个工具,你可以做很多有趣的事情。 快速编辑HTML元素 ? 在Ele...

19450
来自专栏TungHsu

Microsoft Office的几个快捷键

顾名思义,就是把你刚刚做过的那个动作再来一遍。比如:要取消某段话中的某些超链接超链接

10920
来自专栏老马寒门IT

01-Vue.js入门系列

1.1. Vue简介 Vue是一个前端的双向绑定类的框架,发音[读音 /vjuː/, 类似于 view]。新的Vue版本参考了React的部分设计,当然也有自己...

24950

扫码关注云+社区

领取腾讯云代金券