支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast

支付宝小程序弹窗插件wcPop|小程序自定义弹窗组件|提示框alert、确认框confirm、toast提示

请原谅我在这里吐槽下,微信小程序、支付宝小程序官方提供的交互反馈弹窗  如:提示框alert、确认框confirm及prompt、toast弱提示等插件功能比较有限,很多想要的效果都达不到。
如是就自己开发了个支付宝小程序自定义弹窗组件,多种api弹窗样式支持、友好简洁的语法。

支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast

/**
 * @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();
          }
        }
      ]
    });
  },
  
})

支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast 支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast

支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast 支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast

支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast 支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast

支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast 支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast

支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast 支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast

支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast 支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast

支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast 支付宝小程序自定义弹窗插件wcPop|模态弹窗model|弱提示Toast



上一篇:支付宝小程序为淘票票贡献近8成流量,反哺阿里商业操作系统进入发力期


下一篇:Java技术周刊第8期:JVM的GC(垃圾回收器)机制