默認
發表評論 0
支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息
閱讀(5077) | 評論(0 收藏 淘帖
支付寶小程序彈窗wcPop|小程序自定義彈窗組件|提示框alert、確認框confirm及prompt、toast弱提示
支付寶官方提供的交互反饋彈窗組件功能非常有限,很多自定義功能都不能實現,如是就自己開發了一個支付寶小程序自定義彈窗插件wcPop,可以隨意自定義彈窗模板,能實現各種不同的彈窗展示場景,api簡潔優雅,調用方便。

支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_000360截圖20181129144024775.png
支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_002360截圖20181129144408223.png 支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_003360截圖20181129144501976.png
支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_004360截圖20181129144548303.png 支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_005360截圖20181129144633096.png
支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_006360截圖20181129144633096.png 支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_007360截圖20181129144709422.png
支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_009360截圖20181129144918247.png 支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_010360截圖20181129144918247.png
支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_011360截圖20181129145229751.png 支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_012360截圖20181129145303599.png
支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_013360截圖20181129145559337.png 支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_014360截圖20181129145717527.png
支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_015360截圖20181129145755272.png 支付寶小程序自定義彈窗模板|dialog對話框|Toast提示信息_016360截圖20181129145849335.png

引入及調用方式:
/**
 * @title          支付寶小程序自定義彈窗demo
 * @Create         andy
 * @Timer          2018/11/27 23:50:45 GMT+0800 (中國標準時間)
 */

// 引入插件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();
          }
        }
      ]
    });
  },
  
})




即時通訊網 - 即時通訊開發者社區! 來源: - 即時通訊開發者社區!

推薦方案
打賞樓主 ×
使用微信打賞! 使用支付寶打賞!

返回頂部
777彩票走势图表