[首发] 微信小程序自定义弹窗增强版 | 仿微信弹窗样式 | 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();
- };
来源: https://www.qcloud.com/developer/article/1365158