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

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

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

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

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

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

先來展示部分彈窗demo圖：

在需要調(diào)用彈窗插件的頁(yè)面引入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('您點(diǎn)擊了取消！');
      wcPop.close();
     }
    },
    {
     text: '確定',
     style: 'color:#108ee9;',
     onTap() {
      console.log('您點(diǎn)擊了確定！');
     }
    }
   ]
  });
 },

 //自定義多按鈕
 btnTap05: function(e) {
  wcPop({
   title: '^-^支付是一種態(tài)度',
   content: '尊敬的用戶，我們?yōu)槟峁┝恕艾F(xiàn)金支付”和“微信支付兩種方式”，請(qǐng)選擇一種您的常用支付方式進(jì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('您取消了支付請(qǐng)求！');
      wcPop.close();
     }
    }
   ]
  });
 },

 //底部對(duì)話框
 btnTap06: function(e) {
  wcPop({
   skin: 'footer',
   content: '確定刪除該條數(shù)據(jù)嗎？刪除后可在7天之內(nèi)恢復(fù)數(shù)據(jù)，超過7天后數(shù)據(jù)就無(wú)法恢復(fù)啦！',
   anim: 'footer',
   shadeClose: false,

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

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

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

總結(jié)

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

您可能感興趣的文章: