微信小程序自定义弹窗wcPop插件


Posted in Javascript onNovember 19, 2018

微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗

平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改。这个时候首先想到的是自定义组件化开发,就是把弹出框封装成一个组件,然后多处调用。

解决了小程序开发自定义弹窗出现后,遮罩层下的页面仍可以滚动的方法; 给遮罩层的最外层view中加入catchtouchmove=”preventTouchMove” 即可解决该遮罩层点透问题。

根据需要还可以自定义多个按钮及事件,另外还新增了仿微信 android、ios弹窗样式;

微信小程序自定义弹窗wcPop插件

先来展示一些小程序弹窗组件demo图:

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

微信小程序自定义弹窗wcPop插件

在需要使用弹窗的页面引入弹窗js:

import {wcPop} from '../../utils/component/wcPop/tpl.js';

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

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

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

 //自定义多按钮
 btnTap05: function(e) {
  wcPop({
   title: '^-^支付是一种态度',
   content: '尊敬的用户,我们为您提供了“现金支付”和“微信支付两种方式”,请选择一种您的常用支付方式进行支付操作!!!',
   style: 'border-top:5px solid #4eca33;max-width:90%', //自定义弹窗样式
   anim: 'fadeInUp',
   opacity: .85,

   btns: [
    {
     text: '微信支付',
     style: 'color:#4eca33;',
     onTap() {
      console.log('您选择了微信支付!');
     }
    },
    {
     text: '支付宝支付',
     style: 'color:#e63d23;',
     onTap() {
      console.log('您选择了支付宝支付!');
     }
    },
    {
     text: '取消',
     onTap() {
      console.log('您取消了支付请求!');
      wcPop.close();
     }
    }
   ]
  });
 },

总结

以上所述是小编给大家介绍的微信小程序自定义弹窗wcPop插件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
基于jquery的自定义鼠标提示效果 jquery.toolTip
Nov 14 Javascript
jquery实现的随机多彩tag标签随机颜色和字号大小效果
Mar 27 Javascript
js判断滚动条是否已到页面最底部或顶部实例
Nov 20 Javascript
JavaScript中pop()方法的使用教程
Jun 09 Javascript
javascript实现控制的多级下拉菜单
Jul 05 Javascript
javascript中setAttribute()函数使用方法及兼容性
Jul 19 Javascript
详解基于Bootstrap扁平化的后台框架Ace
Nov 27 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
May 21 Javascript
Vuejs 页面的区域化与组件封装的实现
Sep 11 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
Jan 24 Javascript
jQuery实现简单弹幕效果
Nov 28 jQuery
Vue.js 使用v-cloak后仍显示变量的解决方法
Nov 19 #Javascript
Vue.js 中的 v-cloak 指令及使用详解
Nov 19 #Javascript
浅析Vue.js 中的条件渲染指令
Nov 19 #Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 #Javascript
深入浅析Vue.js 中的 v-for 列表渲染指令
Nov 19 #Javascript
为什么说JavaScript预解释是一种毫无节操的机制详析
Nov 18 #Javascript
利用原生的JavaScript实现简单拼图游戏
Nov 18 #Javascript
You might like
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
Laravel给生产环境添加监听事件(SQL日志监听)
2017/06/19 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
javascript 模拟JQuery的Ready方法实现并出现的问题
2009/12/06 Javascript
javascript对话框使用方法(警告框 javascript确认框 提示框)
2014/01/07 Javascript
js获取图片宽高的方法
2015/11/25 Javascript
JavaScript获取客户端IP的方法(新方法)
2016/03/11 Javascript
AngularJS 所有版本下载地址
2016/09/14 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
2018/12/05 Javascript
js中数组对象去重的两种方法
2019/01/18 Javascript
微信小程序中显示倒计时代码实例
2019/05/09 Javascript
es6中reduce的基本使用方法
2019/09/10 Javascript
JavaScript相等运算符的九条规则示例详解
2019/10/20 Javascript
vue-socket.io跨域问题有效解决方法
2020/02/11 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
记一次vue跨域的解决
2020/10/21 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
python发送邮件的实例代码(支持html、图片、附件)
2013/03/04 Python
python控制台英汉汉英电子词典
2020/04/23 Python
快速排序的四种python实现(推荐)
2019/04/03 Python
python读取Excel表格文件的方法
2019/09/02 Python
Python3实现将一维数组按标准长度分隔为二维数组
2019/11/29 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
基于CSS3实现的几个小loading效果
2018/09/27 HTML / CSS
使用HTML5加载音频和视频的实现代码
2020/11/30 HTML / CSS
Gap英国官网:Gap UK
2018/07/18 全球购物
Brydge英国:适用于Apple iPad和Microsoft Surface Pro的蓝牙键盘
2019/05/16 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
医学专业毕业生推荐信
2013/11/14 职场文书
2014教育局对照检查材料思想汇报
2014/09/23 职场文书
党的群众路线整改落实情况汇报
2014/10/28 职场文书
Canvas跟随鼠标炫彩小球的实现
2021/04/11 Javascript
vue实现水波涟漪效果的点击反馈指令
2021/05/31 Vue.js
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
2022/09/23 HTML / CSS