溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶(hù)服務(wù)條款》

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

發(fā)布時(shí)間：2020-08-24 19:41:03 來(lái)源：腳本之家 閱讀：211 作者：xiaoyan2017 欄目：web開(kāi)發(fā)

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

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

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

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

先來(lái)展示部分彈窗demo圖：

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

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

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

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

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

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

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

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

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

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

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

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

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

在需要調(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("知道了");
     }
    }
   ]
  });
 },

 //詢(xún)問(wèn)框
 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: '尊敬的用戶(hù)，我們?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ù)，超過(guò)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ì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)億速云網(wǎng)站的支持！

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手