| 支付宝小程序弹窗插件开发 | 您所在的位置：网站首页 › 支付宝如何弹窗取消 › 支付宝小程序弹窗插件开发 |
支付宝小程序弹窗插件开发
|
支付宝小程序自定义弹窗组件|阿里小程序弹窗插件|提示框alert、确认框confirm、toast弱提示 支付宝小程序弹窗交互组件和微信小程序弹窗功能都差不多，对功能有比较多的限制，尤其想要实现丰富一些的弹窗场景就只能自己写组件实现了。 之前有开发过一个微信小程序自定义弹窗插件wcPop，想着支付宝小程序和微信小程序开发模式差不多，就开发了个支付宝小程序弹窗wcPop移植版，功能效果能满足大多数弹窗使用场景。 如果刚好您的项目开发中需要用到的话，希望对您们有丢丢地帮助~~  代码语言：javascript复制/**
* @title 支付宝小程序自定义弹窗demo
* @Create andy
* @Timer 2018/11/27 23:50:45 GMT+0800 (中国标准时间)
* @bolg https://www.cnblogs.com/xiaoyan2017 Q：282310962 wx：xy190310
*/
// 引入插件js
import {wcPop} from '../../utils/component/wcPop/tpl.js';
Page({
/**
* 页面的初始数据
*/
data: {
},
onLoad(query) {
// 页面加载
console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
},
/**
* --------- 支付宝小程序弹窗演示函数.Start ---------
*/
//msg提示
btnTap01: function(e) {
wcPop({
anim: 'fadeIn',
content: 'msg提示框测试（5s后窗口关闭）',
shade: true,
shadeClose: false,
time: 5
});
},
//msg提示(黑色背景)
btnTap02: function(e) {
wcPop({
content: 'msg提示框测试（2s后窗口关闭）',
shade: false,
style: 'background: rgba(17,17,17,.7); color: #fff;',
time: 2
});
},
//信息框
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();
}
}
]
});
},
})采用原生js写法，看到配置语法，是不是狠眼熟 代码语言：javascript复制var util = { extend: function (target, source){ for (var i in source) { if (!(i in target)) { target[i] = source[i]; } } return target; }, timer: {}, // 定时器 show: {}, // 弹窗显示后回调函数 end: {} // 弹窗销毁后回调函数 , // 方向检测 direction: function(x1,x2,y1,y2){ return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'left' : 'right') : (y1 - y2 > 0 ? 'up' : 'down') } , // 位置检测（屏幕四周） chkPosition: function (pageX, pageY, domWidth, domHeight, windowWidth, windowHeight){ var _left = (pageX + domWidth) > windowWidth ? (pageX - domWidth) : pageX; var _top = (pageY + domHeight) > windowHeight ? (pageY - domHeight) : pageY; var dpr = 750/windowWidth; return [_left*dpr, _top*dpr]; } }, wcPop = function(options){ __this = getCurrentPages()[getCurrentPages().length - 1]; //获取当前page实例(跨页面挂载) var that = this, config = { id: 'wcPop', //弹窗ID标识 (不同ID对应不同弹窗) title: '', //标题 content: '', //内容 - ###注意：引入自定义弹窗模板 content: ['tplTest01'] tplTest01为模板名称(在插件目录template页面中配置) style: '', //自定弹窗样式 skin: '', //自定弹窗显示风格 ->目前支持配置 toast(仿微信toast风格)、footer(底部对话框风格)、actionsheet(底部弹出式菜单)、ios|android(仿微信样式) icon: '', //弹窗小图标(success | info | error | loading) shade: true, //是否显示遮罩层 shadeClose: true, //是否点击遮罩时关闭层 opacity: '', //遮罩层透明度 xclose: false, //自定义关闭按钮(默认右上角) anim: 'scaleIn', //scaleIn：缩放打开(默认) fadeIn：渐变打开 fadeInUpBig：由上向下打开 fadeInDownBig：由下向上打开 rollIn：左侧翻转打开 shake：震动 footer：底部向上弹出 position: '', //弹窗显示位置(top | right | bottom | left) follow: null, //跟随定位（适用于长按跟随定位） time: 0, //设置弹窗自动关闭秒数1、 2、 3 touch: null, //触摸函数 参数：[ {direction:'left|right|up|down', fn(){}} ] btns: null //不设置则不显示按钮，btn参数: [{按钮1配置}, {按钮2配置}] }; that.opts = util.extend(options, config); that.init(); };             
|
【本文地址】
公司简介
联系我们