支付宝小程序自定义弹窗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 相关文章推荐
JavaScript中instanceof与typeof运算符的用法及区别详细解析
Nov 19 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
JS通过ajax动态读取xml文件内容的方法
Mar 24 Javascript
jQuery遍历json的方法分析
Apr 16 Javascript
深入浅析JavaScript中的arguments对象(强力推荐)
Jun 03 Javascript
JavaScript计时器用法分析【setTimeout和clearTimeout】
Jan 18 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
详解Layer弹出层样式
Aug 21 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
使用Vue如何写一个双向数据绑定(面试常见)
Apr 20 Javascript
原生javascript实现连连看游戏
Jan 03 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
PHP遍历二维数组的代码
2011/04/22 PHP
PHP __autoload函数(自动载入类文件)的使用方法
2012/02/04 PHP
PHP与JavaScript针对Cookie的读写、交互操作方法详解
2017/08/07 PHP
PHP迭代器和生成器用法实例分析
2019/09/28 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
jquery 注意事项与常用语法小结
2010/06/07 Javascript
在js中判断checkboxlist(.net控件客户端id)是否有选中
2013/04/11 Javascript
js模拟点击以提交表单为例兼容主流浏览器
2013/11/29 Javascript
JavaScript学习笔记之JS对象
2015/01/22 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
浅谈javascript中的 “ && ” 和 “ || ”
2017/02/02 Javascript
微信分享调用jssdk实例
2017/06/08 Javascript
Chart.js 轻量级HTML5图表绘制工具库(知识整理)
2018/05/22 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
Vue插件之滑动验证码用法详解
2020/04/05 Javascript
vue 组件间的通信之子组件向父组件传值的方式
2020/07/29 Javascript
python赋值操作方法分享
2013/03/23 Python
python结合shell查询google关键词排名的实现代码
2016/02/27 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
Python 数据处理库 pandas进阶教程
2018/04/21 Python
Python箱型图绘制与特征值获取过程解析
2019/10/22 Python
python输入中文的实例方法
2020/09/14 Python
详解如何解决canvas图片getImageData,toDataURL跨域问题
2018/09/17 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
外企办公室竞聘演讲稿
2013/12/29 职场文书
文化活动实施方案
2014/03/28 职场文书
大学生个人先进事迹材料范文
2014/05/03 职场文书
毕业纪念册寄语大全
2015/02/26 职场文书
2015年教师节感恩寄语
2015/03/23 职场文书
高中家长意见怎么写
2015/06/03 职场文书
教师网络培训心得体会
2016/01/09 职场文书
护理自荐信
2019/05/14 职场文书