微信小程序自定义弹窗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 相关文章推荐
javascript与CSS复习(《精通javascript》)
Jun 29 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
Mar 30 Javascript
Extjs优化(一)删除冗余代码提高运行速度
Apr 15 Javascript
HTML Color Picker(js拾色器效果)
Aug 27 Javascript
JS去除字符串两端空格的简单实例
Dec 27 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
原生JS下拉加载插件分享
Dec 26 Javascript
详解angularjs 学习之 scope作用域
Jan 15 Javascript
详解async/await 异步应用的常用场景
May 13 Javascript
JavaScript怎样在删除前添加确认弹出框?
May 27 Javascript
JS原生实现轮播图的几种方法
Mar 23 Javascript
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
用PHP实现登陆验证码(类似条行码状)
2006/10/09 PHP
第四节--构造函数和析构函数
2006/11/16 PHP
php读取mysql中文数据出现乱码的解决方法
2013/08/16 PHP
php实现的单一入口应用程序实例分析
2015/09/23 PHP
编写PHP脚本使WordPress的主题支持Widget侧边栏
2015/12/14 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
JavaScript 语言的递归编程
2010/05/18 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
js文字横向滚动特效
2015/11/11 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
Bootstrap每天必学之标签页(Tab)插件
2020/08/09 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
Boostrap基础教程之JavaScript插件篇
2016/09/08 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
用jquery获取select标签中选中的option值及文本的示例
2018/01/25 jQuery
原生js实现日历效果
2020/03/02 Javascript
[48:54]VGJ.T vs infamous Supermajor小组赛D组败者组第一轮 BO3 第二场 6.3
2018/06/04 DOTA
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
Python实现Restful API的例子
2019/08/31 Python
django中的图片验证码功能
2019/09/18 Python
Python getattr()函数使用方法代码实例
2020/08/10 Python
Python操作Excel的学习笔记
2021/02/18 Python
计算机毕业大学生推荐信
2013/12/01 职场文书
创业计划书如何吸引他人眼球
2014/01/10 职场文书
物流专业大学生职业生涯规划书范文
2014/01/15 职场文书
2014年元旦感言
2014/03/06 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
2014年团总支工作总结
2014/11/21 职场文书
大学生个人年度总结范文
2015/02/15 职场文书
幼师辞职信范文
2015/02/27 职场文书
Android开发 使用文件储存的方式保存QQ密码
2022/04/24 Java/Android
Java 定时任务技术趋势简介
2022/05/04 Java/Android