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

2024-11-26 06:31:44

支付宝小程序官方提供的alert提示框、dialog对话框、model弹窗功能比较有限，有些都不能随意自定义修改的。如是自己就捯饬着封装了个支付宝小程序自定义弹窗插件wcPop，多种展示场景，随意修改调用。

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

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

先来展示部分弹窗demo图：

在需要调用弹窗插件的页面引入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插件的实现代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

微信小程序HTTP接口请求封装代码实例

1.方法封装(新建文件夹util,工具文件,在文件夹下创建request.js文件,用于对方法封装) request.js: var app = getApp(); //项目URL相同部分,减轻代码量,同时方便项目迁移 //这里因为我是本地调试,所以host不规范,实际上应该是你备案的域名信息 var host = 'http://localhost:8081/demo/'; /** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回
微信小程序获取循环元素id以及wx.login登录操作

微信小程序获取循环元素id以及wx.login登录操作通过点击方法获取循环数据元素的id例: wxml里: <view id="list" wx:for="{{txt}}" > <text id="L_name">{{item.name}}</text> <text id="L_price">￥{{item.price}}/{{item.unit}}</text>
微信小程序JS加载esmap地图的实例详解

一.在微信小程序里显示室内三维地图需要满足的两个条件调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小程序是企业主体,微信 web-view 组件不对个人类型的小程序开放. 2. 您需要有一个自己的域名,在嵌入网页的时候需要在微信后台验证域名(只有自己域名下的网页才能被正确地显示哦,不能随便找一个公开链接). 二.具体实现步骤 1.域名验证: 由于微信平台的规定,web-view 指向的地址,必须是
微信小程序之 catalog 切换实现解析

组件名称:catalog 组件属性:catalogData,type:String 组件描述:这是一个子组件,数据从父组件中传递效果图: catalog 目录为多个,使用 scroll-view 容器.但是在当前组件中,只写每个 catalog 数据展示并实现 catalog 切换效果,这样会保证当前组件的最小粒度. 分析当前组件可能用到的属性为:组件名称,切换状态,未选中状态,切换点击方法. <block wx:for="{{catalogData}}" wx:key=&qu
微信小程序页面滚动到指定位置代码实例

这篇文章主要介绍了微信小程序页面滚动到指定位置代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下页面上有一个元素或者组件,id 为 comment 则: var me = this; var query = wx.createSelectorQuery().in(me); query.selectViewport().scrollOffset() query.select("#comment").boundingClientRe
微信小程序 wx.login解密出现乱码的问题解决办法

微信小程序 wx.login解密出现乱码的问题解决办法最近在给公司开发微信小程序,需要用到微信登录,根据文档要求需要把获取的用户信息按照AES进行解密. 我使用的是官方提供的PHP demo,拷贝到程序中,测试发现,解密之后的数据前面有一串乱码. 类似于这样子的,前面一段是乱码. 经过仔细的检查,发现官方的提供的demo中的帐号和机密之后的信息是可以解密的,这就说明解密代码是没有问题的. 后来查询微信开发者社区,找到好多解密失败.其中一个回答说是因为多次调用wx.login之后导致的问题. 终
pjblog中清空引用的小程序

sake: 很有用的程序呵呵转的,虽然现在打了防垃圾引用的补丁了转自这里http://bbs.pjhome.net/viewthread.php?tid=12833&extra=page%3D1%26amp%3Bfilter%3D0%26amp%3Borderby%3Ddateline 今天彻底把我若怒了自己写了一个,先清一下再说保存到一个asp文件中,放到你BLOG的根目录,运行就OK了,页面中出现的数字是被删除的引用我今天删了5000-- 复制代码代码如下: <!--#in
支付宝小程序自定义弹窗dialog插件的实现代码

支付宝小程序官方提供的alert提示框.dialog对话框.model弹窗功能比较有限,有些都不能随意自定义修改的.如是自己就捯饬着封装了个支付宝小程序自定义弹窗插件wcPop,多种展示场景,随意修改调用. 自定义的小程序弹窗采用了全新的模板布局,极简的api调用方式,同时解决了自定义弹窗出现时,蒙层下的页面仍可以滚动的问题. 在原始功能的基础上,新增了跟随定位弹窗.上下左右弹窗.弹窗swipe滑动功能先来展示部分弹窗demo图: 在需要调用弹窗插件的页面引入tpl.js //信息框 btnT
微信小程序自定义弹窗wcPop插件

微信小程序自定义组件弹窗wcPop|小程序消息提示框|toast自定义模板弹窗平时在开发小程序的时候,弹窗应用场景还是蛮广泛的,但是微信官方提供的弹窗比较有局限性,不能自定义修改.这个时候首先想到的是自定义组件化开发,就是把弹出框封装成一个组件,然后多处调用. 解决了小程序开发自定义弹窗出现后,遮罩层下的页面仍可以滚动的方法: 给遮罩层的最外层view中加入catchtouchmove="preventTouchMove" 即可解决该遮罩层点透问题. 根据需要还可以自定义多个按钮及事
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法

本文为大家分享了微信小程序自定义弹窗滚动与页面滚动冲突的解决方法,供大家参考,具体内容如下先看效果是否是自己需要的实现步骤: 1.整个布局用作为根节点包裹所有view,并动态绑定scroll-view的scroll-y属性 2.样式文件中设置Page的overflow-y属性值为hidden 3.样式文件中设置scroll-view的height属性值为100% 4.打开自定义弹窗的点击事件中,更改isScroll的值为false,关闭弹窗的点击事件中,更改isScroll的值为true J
微信小程序自定义弹窗实现过程(附代码)

这篇文章主要介绍了微信小程序自定义弹窗实现过程(附代码),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下小程序官网里弹出框一般都是类似下面形式: 而有时候我们需要更丰富的弹窗时,就可用自定义弹窗的样式: 举个例子,像下面图的样式,点击后会弹出不一样的窗口: 代码如下: index.wxml 文件  <view class="click" bindtap="click&qu
微信小程序自定义音乐进度条的实例代码

需求:显示音乐播放按钮.可手动拖拽进度条:页面中含多个音乐,播放当前音乐时暂停其他音乐播放. 小程序自带标签 audio 小程序自带的audio标签含固定的样式,且有最小尺寸.目前项目也不含name和author字段,所以放弃audio标签. 实现效果图初始化音乐数据 <text>{{currentProcess}}</text> <slider bindchange="" bindtouchstart="" bindtouchend
微信小程序自定义菜单切换栏tabbar组件代码实例

这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx:key="{{index}}"> <view class="item_name {{tabInde
微信小程序自定义弹窗实现详解(可通用）

本文为自定义弹窗,该内容可满足如下需求: 自定义各种布局弹窗点击弹窗布局外消失弹窗弹出弹窗时背景阴影半透明各方向弹出效果(本文为自下而上弹出) 话不多说,先上图看效果: 点击昵称旁边的编辑按钮弹出自定义弹窗上图是我自己拙劣的审美自定义的一个编辑弹窗,因为重点是自定义弹窗,所以在下文的通用代码中我就去掉了这些布局,剩下填充部分由读者自行填充. 下面上代码,老规矩,还是微信小程序对应的几个文件的代码,可直接贴到页面里用的哦. .wxml 文件中直接放到wxml的最底部就行了,十分简练.
微信小程序自定义顶部组件customHeader的示例代码

1.开启配置自定义顶部 { "window": { "navigationStyle":"custom" } } 在app.json的文件window配置"navigationStyle": "custom"属性即可 2.自定义顶部计算原理 2.1 获取系统状态栏的高度和屏幕宽度使用wx.getSystemInfo这个函数获取系统状态栏的高度和屏幕宽度. 2.2 获取右上角胶囊位置信息使用wx.getM
PHP解密支付宝小程序的加密数据、手机号的示例代码

1.小程序端代码示例 my.getPhoneNumber({ success: (res) => { let encryptedData = res.response; my.httpRequest({ url: '你的后端服务端', data: encryptedData, }); }, fail: (res) => { console.log(res); console.log('getPhoneNumber_fail'); }, }); 2.PHP后端解密示例 public static
微信小程序自定义多选事件的实现代码

要实现下图的效果(自定义多选单选),大多数公司项目的多选框都是自己设计的,所以用原生标签或者组件是不可行的,最简单的是自己绑定事件,然后切换选择和未选择的图片.而小程序和vue一样是没法操作dom的,所以要利用数组的下标和自定义属性来进行三元判断. 直接上代码: wxml: <view class="sel-box"> /**用wx:for来进行列表渲染**/ <view wx:for="{{repContent}}" class="mu

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

相关推荐

随机推荐