支付宝小程序自定义弹窗dialog插件的实现代码


Posted in Javascript onNovember 30, 2018

支付宝小程序官方提供的alert提示框、dialog对话框、model弹窗功能比较有限,有些都不能随意自定义修改的。如是自己就?意磷欧庾傲烁鲋Ц侗π〕绦蜃远ㄒ宓?安寮?cPop,多种展示场景,随意修改调用。

自定义的小程序弹窗采用了全新的模板布局,极简的api调用方式,同时解决了自定义弹窗出现时,蒙层下的页面仍可以滚动的问题。

在原始功能的基础上,新增了跟随定位弹窗、上下左右弹窗、弹窗swipe滑动功能

支付宝小程序自定义弹窗dialog插件的实现代码

先来展示部分弹窗demo图:

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序自定义弹窗dialog插件的实现代码

在需要调用弹窗插件的页面引入tpl.js

//信息框
 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:#108ee9;',
     onTap() {
      console.log('您点击了确定!');
     }
    }
   ]
  });
 },

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

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

 //底部对话框
 btnTap06: function(e) {
  wcPop({
   skin: 'footer',
   content: '确定删除该条数据吗?删除后可在7天之内恢复数据,超过7天后数据就无法恢复啦!',
   anim: 'footer',
   shadeClose: false,

   btns: [
    {
     text: '恢复',
     style: 'color:#108ee9;',
     onTap() {
      console.log('您点击了恢复!');

     }
    },
    {
     text: '删除',
     style: 'color:#e63d23;',
     onTap() {
      console.log('您点击了删除!');

      //删除回调提示
      wcPop({
       anim: 'fadeIn',
       content: '您点击了删除功能',
       shade: true,
       time: 3
      });
     }
    },
    {
     text: '取消',
     onTap() {
      console.log('您点击了取消!');
      wcPop.close();
     }
    }
   ]
  });
 },

总结

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

Javascript 相关文章推荐
Jquery跨域获得Json时invalid label错误的解决办法
Jan 11 Javascript
将HTMLCollection/NodeList/伪数组转换成数组的实现方法
Jun 20 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
Aug 26 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
JQuery菜单效果的两个实例讲解(3)
Sep 17 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
js实现二级导航功能
Mar 03 Javascript
AngularJS实现自定义指令与控制器数据交互的方法示例
Jun 19 Javascript
vue resource post请求时遇到的坑
Oct 19 Javascript
Node.js + express实现上传大文件的方法分析【图片、文本文件】
Mar 14 Javascript
微信小程序 获取手机号 JavaScript解密示例代码详解
May 14 Javascript
javascript实现京东登录显示隐藏密码
Aug 02 Javascript
使用canvas实现一个vue弹幕组件功能
Nov 30 #Javascript
VUE基于NUXT的SSR 服务端渲染
Nov 30 #Javascript
Nuxt.js开启SSR渲染的教程详解
Nov 30 #Javascript
基于JavaScript实现每日签到打卡轨迹功能
Nov 29 #Javascript
Next.js项目实战踩坑指南(笔记)
Nov 29 #Javascript
js canvas实现二维码和图片合成的海报
Nov 19 #Javascript
详解@angular/cli 改变默认启动端口两种方式
Nov 29 #Javascript
You might like
无线电广播的开始
2002/01/30 无线电
人大复印资料处理程序_查询篇
2006/10/09 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
jquery.validate使用攻略 第三部
2010/07/01 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
2013/11/22 Javascript
关闭ie窗口清除Session的解决方法
2014/01/10 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
jQuery实现鼠标单击网页文字后在文本框显示的方法
2015/05/06 Javascript
js实现Form栏显示全格式时间时钟效果代码
2015/08/19 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
Javascript 动态改变imput type属性
2016/11/01 Javascript
使用express+multer实现node中的图片上传功能
2018/02/02 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
[45:32]Liquid vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.23
2018/08/24 DOTA
pyqt和pyside开发图形化界面
2014/01/22 Python
python调用新浪微博API项目实践
2014/07/28 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
Python argv用法详解
2016/01/08 Python
Django Highcharts制作图表
2016/08/27 Python
详解常用查找数据结构及算法(Python实现)
2016/12/09 Python
浅谈python中np.array的shape( ,)与( ,1)的区别
2018/06/04 Python
Python实现带下标索引的遍历操作示例
2019/05/30 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
解析pip安装第三方库但PyCharm中却无法识别的问题及PyCharm安装第三方库的方法教程
2020/03/10 Python
用python查找统一局域网下ip对应的mac地址
2021/01/13 Python
CSS3 简单又实用的5个属性
2010/03/04 HTML / CSS
HTML5 WebSocket实现点对点聊天的示例代码
2018/01/31 HTML / CSS
中国宠物用品商城:E宠商城
2016/08/27 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
Genny意大利官网:意大利高级时装品牌
2020/04/15 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
简历上的自我评价怎么写
2014/01/28 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
电大毕业生自我鉴定
2014/04/10 职场文书
土地租赁意向书
2014/07/30 职场文书
教师政风行风自查自纠报告
2014/10/21 职场文书