微信小程序自定义弹窗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 相关文章推荐
找到了一篇jQuery与Prototype并存的冲突的解决方法
Aug 29 Javascript
JavaScript学习历程和心得小结
Aug 16 Javascript
JavaScript 高级篇之函数 (四)
Apr 07 Javascript
编写针对IE的JS代码两种编写方法
Jan 30 Javascript
JavaScript中对象属性的添加和删除示例
May 12 Javascript
jquery实现的判断倒计时是否结束代码
Feb 05 Javascript
原生JS实现层叠轮播图
May 17 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
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 header Content-Type类型小结
2011/07/03 PHP
tp5.1 框架join方法用法实例分析
2020/05/26 PHP
潜说js对象和数组
2011/05/25 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
首页图片漂浮效果示例代码
2014/06/05 Javascript
javascript常用方法总结
2015/05/14 Javascript
基于JavaScript如何实现私有成员的语法特征及私有成员的实现方式
2015/10/28 Javascript
js判断上传文件后缀名是否合法
2016/01/28 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
D3.js实现折线图的方法详解
2016/09/21 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
详解vue-router 2.0 常用基础知识点之router.push()
2017/05/10 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
axios post提交formdata的实例
2018/03/16 Javascript
js代码规范之Eslint安装与配置详解
2018/09/08 Javascript
详解微信小程序与内嵌网页交互实现支付功能
2018/10/22 Javascript
ionic3双击返回退出应用的方法
2019/09/17 Javascript
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
用pickle存储Python的原生对象方法
2017/04/28 Python
关于python的list相关知识(推荐)
2017/08/30 Python
tensorflow 1.0用CNN进行图像分类
2018/04/15 Python
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python 比较文本相似性的方法(difflib,Levenshtein)
2018/10/15 Python
Python txt文件加入字典并查询的方法
2019/01/15 Python
浅析Python3中的对象垃圾收集机制
2019/06/06 Python
Pytorch Tensor的索引与切片例子
2019/08/18 Python
python config文件的读写操作示例
2019/09/27 Python
python使用ctypes调用扩展模块的实例方法
2020/01/28 Python
Zalando Lounge瑞士:时尚与生活方式购物俱乐部
2020/03/12 全球购物
2014年班主任自我评价范文
2014/04/23 职场文书
团队会宣传标语
2014/10/09 职场文书
2016年高校自主招生自荐信范文
2015/03/24 职场文书
2016年小学中秋节活动总结
2016/04/05 职场文书
公文写作指导之倡议书!
2019/07/03 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
python自动化测试之Selenium详解
2022/03/13 Python