支付宝小程序弹窗插件wcPop|小程序自定义弹窗组件|提示框alert、确认框confirm、toast提示
请原谅我在这里吐槽下,微信小程序、支付宝小程序官方提供的交互反馈弹窗 如:提示框alert、确认框confirm及prompt、toast弱提示等插件功能比较有限,很多想要的效果都达不到。
如是就自己开发了个支付宝小程序自定义弹窗组件,多种api弹窗样式支持、友好简洁的语法。
/**
* @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();
}
}
]
});
},
})
![33ab178a9f3ae3bf5148320069dd184a464b7c92](https://yqfile.alicdn.com/33ab178a9f3ae3bf5148320069dd184a464b7c92.png?x-oss-process=image/resize,w_1400/format,webp)
![e105fc4069e600672832e5a9880deedf7a9c4748](https://yqfile.alicdn.com/e105fc4069e600672832e5a9880deedf7a9c4748.png?x-oss-process=image/resize,w_1400/format,webp)