支付宝小程序自定义弹窗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的图片左右无缝滚动插件
May 23 Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 Javascript
Jquery Ajax xmlhttp请求成功问题
Feb 04 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
javascript实现的右下角弹窗实例
Apr 24 Javascript
Jquery动态添加输入框的方法
May 29 Javascript
jquery实现的缩略图预览滑块实例
Jun 25 Javascript
数组Array的排序sort方法
Feb 17 Javascript
JavaScript严格模式下关于this的几种指向详解
Jul 12 Javascript
理解javascript async的用法
Aug 22 Javascript
layui 根据后台数据动态创建下拉框并同时默认选中的实例
Sep 02 Javascript
微信小程序后端(java)开发流程的详细步骤
Nov 13 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
linux下使用ThinkPHP需要注意大小写导致的问题
2011/08/02 PHP
支持中文字母数字、自定义字体php验证码代码
2012/02/27 PHP
PHP CodeBase:将时间显示为"刚刚""n分钟/小时前"的方法详解
2013/06/06 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
PHP创建单例后台进程的方法示例
2017/05/23 PHP
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
JavaScript调用ajax获取文本文件内容实现代码
2014/03/28 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
JavaScript实现的SHA-1加密算法完整实例
2016/02/02 Javascript
使用JQuery选择HTML遍历函数的方法
2016/09/17 Javascript
基于JS实现的随机数字抽签实例
2016/12/08 Javascript
js实现自动轮换选项卡
2017/01/13 Javascript
Javascript中的prototype与继承
2017/02/06 Javascript
JS通过调用微信API实现微信支付功能的方法示例
2017/06/29 Javascript
详解webpack 如何集成第三方js库
2017/06/29 Javascript
JS获取子、父、兄节点方法小结
2017/08/14 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
关于vue的npm run dev和npm run build的区别介绍
2019/01/14 Javascript
vuex实现的简单购物车功能示例
2019/02/13 Javascript
python实现异步回调机制代码分享
2014/01/10 Python
python基础教程之常用运算符
2014/08/29 Python
python实现单向链表详解
2018/02/08 Python
python3+PyQt5实现自定义流体混合窗口部件
2018/04/24 Python
python opencv读mp4视频的实例
2018/12/07 Python
Python Image模块基本图像处理操作小结
2019/04/13 Python
python multiprocessing模块用法及原理介绍
2019/08/20 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
html5+css如何实现中间大两头小的轮播效果
2018/12/06 HTML / CSS
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
Pedro官网:新加坡时尚品牌
2019/08/27 全球购物
部队领导证婚词
2014/01/12 职场文书
上班离岗检讨书
2014/01/27 职场文书
离婚协议书怎么写
2015/01/26 职场文书
不同意离婚代理词
2015/05/23 职场文书
python神经网络 使用Keras构建RNN训练
2022/05/04 Python