支付宝小程序自定义弹窗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 相关文章推荐
判断目标是否是window,document,和拥有tagName的Element的代码
May 31 Javascript
js 火狐下取本地路径实现思路
Apr 02 Javascript
javascript动态创建链接的方法
May 13 Javascript
Bootstrap每天必学之导航组件
Apr 25 Javascript
javascript深拷贝和浅拷贝详解
Feb 14 Javascript
深入理解Angular.JS中的Scope继承
Jun 04 Javascript
微信小程序授权获取用户详细信息openid的实例详解
Sep 20 Javascript
vue中简单弹框dialog的实现方法
Feb 26 Javascript
详解webpack模块加载器兼打包工具
Sep 11 Javascript
vue父组件触发事件改变子组件的值的方法实例详解
May 07 Javascript
七行JSON代码把你的网站变成移动应用过程详解
Jul 09 Javascript
vue表单验证之禁止input输入框输入空格
Dec 03 Vue.js
使用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中使用PDF文档功能
2006/10/09 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
php多线程并发实现方法
2016/09/30 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
用js实现控件的隐藏及style.visibility的使用
2013/06/14 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
js实现有时间限制消失的图片方法
2015/02/27 Javascript
JavaScript判断IE版本型号
2015/07/27 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
vue子父组件通信的实现代码
2017/07/09 Javascript
详解React开发必不可少的eslint配置
2018/02/05 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
Vue面试题及Vue知识点整理
2018/10/07 Javascript
vue语法自动转typescript(解放双手)
2019/09/18 Javascript
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python读取xlsx的方法
2018/12/25 Python
openCV提取图像中的矩形区域
2020/07/21 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
英国男女豪华配饰和礼品网站:Black.co.uk
2020/02/28 全球购物
澳大利亚领先的内衣店:Bendon Lingerie澳大利亚
2020/05/15 全球购物
汇智创新科技发展有限公司
2015/12/06 面试题
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
客户经理岗位职责
2013/12/08 职场文书
广告词串烧
2014/03/19 职场文书
产品质量承诺范本
2014/03/31 职场文书
个人对照检查材料思想汇报(四风问题)
2014/09/25 职场文书
2014年终个人总结报告
2015/03/09 职场文书
施工现场安全管理制度
2015/08/05 职场文书
Windows下redis下载、redis安装及使用教程
2021/06/02 Redis
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang