支付寶小程序自定義彈窗dialog插件的實現(xiàn)代碼

更新時間：2018年11月30日 08:33:24 作者：xiaoyan2017

支付寶小程序官方提供的alert提示框、dialog對話框、model彈窗功能比較有限，有些都不能隨意自定義修改的。這篇文章主要介紹了支付寶小程序自定義彈窗dialog插件的實現(xiàn)代碼,需要的朋友可以參考下

支付寶小程序官方提供的alert提示框、dialog對話框、model彈窗功能比較有限，有些都不能隨意自定義修改的。如是自己就捯飭著封裝了個支付寶小程序自定義彈窗插件wcPop，多種展示場景，隨意修改調(diào)用。

自定義的小程序彈窗采用了全新的模板布局，極簡的api調(diào)用方式，同時解決了自定義彈窗出現(xiàn)時,蒙層下的頁面仍可以滾動的問題。

在原始功能的基礎(chǔ)上，新增了跟隨定位彈窗、上下左右彈窗、彈窗swipe滑動功能

先來展示部分彈窗demo圖：

在需要調(diào)用彈窗插件的頁面引入tpl.js

//信息框
 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: '^-^支付是一種態(tài)度',
   content: '尊敬的用戶，我們?yōu)槟峁┝恕艾F(xiàn)金支付”和“微信支付兩種方式”，請選擇一種您的常用支付方式進行支付操作?。?！',
   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: '確定刪除該條數(shù)據(jù)嗎？刪除后可在7天之內(nèi)恢復數(shù)據(jù)，超過7天后數(shù)據(jù)就無法恢復啦！',
   anim: 'footer',
   shadeClose: false,

   btns: [
    {
     text: '恢復',
     style: 'color:#108ee9;',
     onTap() {
      console.log('您點擊了恢復！');

     }
    },
    {
     text: '刪除',
     style: 'color:#e63d23;',
     onTap() {
      console.log('您點擊了刪除！');

      //刪除回調(diào)提示
      wcPop({
       anim: 'fadeIn',
       content: '您點擊了刪除功能',
       shade: true,
       time: 3
      });
     }
    },
    {
     text: '取消',
     onTap() {
      console.log('您點擊了取消！');
      wcPop.close();
     }
    }
   ]
  });
 },

總結(jié)

以上所述是小編給大家介紹的支付寶小程序自定義彈窗dialog插件的實現(xiàn)代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: