微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示

微信小程序弹窗wcPop开发|微信小程序自定义弹窗插件|alert、model、toast多功能弹窗
有过微信小程序开发的程序员都知道,官方提供的弹窗交互组件功能非常有限,对于想要实现一些丰富的弹窗应用场景就只能自己撸代码实现了。

之前有开发过一个手机端h5弹窗插件wcPop,反正原生js代码语法都差不多,就试着搞了个微信小程序弹窗插件,功能效果肯定能满足大多数弹窗使用场景。

如果刚好您的项目开发中需要用到的话,希望对您们有些些的帮助!

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第1张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第2张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第3张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第4张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第5张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第6张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第7张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第8张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第9张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第10张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第11张图片

微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示_第12张图片

/**
* --------- 小程序弹窗演示函数.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("知道了");
      }
    }
  ]
});
},

你可能感兴趣的:(微信小程序自定义弹窗插件|showModel模态弹窗|Toast提示)