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

10年積累的成都網(wǎng)站建設(shè)、成都做網(wǎng)站經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有柯橋免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

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

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

先來展示部分彈窗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('您點(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)金支付”和“微信支付兩種方式”，請選擇一種您的常用支付方式進(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('您取消了支付請求！');
      wcPop.close();
     }
    }
   ]
  });
 },

 //底部對(duì)話框
 btnTap06: function(e) {
  wcPop({
   skin: 'footer',
   content: '確定刪除該條數(shù)據(jù)嗎？刪除后可在7天之內(nèi)恢復(fù)數(shù)據(jù)，超過7天后數(shù)據(jù)就無法恢復(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();
     }
    }
   ]
  });
 },

當(dāng)前題目：支付寶小程序自定義彈窗dialog插件的實(shí)現(xiàn)代碼-創(chuàng)新互聯(lián)
網(wǎng)站地址：http://chinadenli.net/article8/ecsop.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供App開發(fā)、定制開發(fā)、網(wǎng)頁設(shè)計(jì)公司、網(wǎng)站收錄、響應(yīng)式網(wǎng)站、域名注冊

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)