支付宝小程序弹窗 | 自定义 alert 弹窗 | model 对话框 | actionSheet 选项
支付宝小程序官方提供的交互反馈弹窗 如: 提示框 alert, 确认框 confirm 及 prompt,toast 弱提示等插件功能比较有限, 很多想要的效果都达不到.
如是就自己开发了个支付宝小程序自定义弹窗组件, 多种简洁优雅的代码.
- // 引入插件 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();
- }
- }
- ]
- });
- },
来源: http://www.jianshu.com/p/c5b47a083cf7