用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

1

主题

8

帖子

150

积分

架构狮

Rank: 3Rank: 3

积分
150
QQ
2018-11-18 15:09:27 xiaoyan2015 架构狮 楼主 52523

微信小程序自定义showModel模态弹窗|actionSheet弹窗|toast自定义图标信息框
微信小程序自定义弹窗实战——wcPop插件,很早之前就想写一个小程序自定义弹窗扩展练练手,但是由于时间的关系,一直没有真正的开发(其实就是懒)。好吧,反正最近这段时间稍微比较清闲,趁着这个机会,开发了这个多功能仿微信类型弹窗效果。


360截图20181118103736888.png


引入弹窗js: import {wcPop} from '../../utils/component/wcPop/tpl.js';
调用方式:
[JavaScript] 纯文本查看 复制代码
/**
   * --------- 小程序弹窗演示函数.Start ---------
   */
  //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("知道了");
          }
        }
      ]
    });
  },

001360截图20181117110044432.png 002360截图20181117110217296.png
003360截图20181117110249704.png 004360截图20181117110334240.png
005360截图20181117110613448.png 006360截图20181117110931312.png
007360截图20181117111007440.png 008360截图20181117111809104.png
009360截图20181117112008088.png 011360截图20181117111916481.png
012360截图20181117112123619.png 014360截图20181117112238337.png
016360截图20181117112359769.png 018360截图20181117112734640.png
017360截图20181117112517601.png

https://www.cnblogs.com/xiaoyan2017/
漂亮
demo可以贴一下吗?
这是资源吗?我怎么没找到源码?
发新帖
您需要登录后才可以回帖 登录 | 立即注册