<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

        微信小程序自定義彈窗wcPop插件

        來源:懂視網 責編:小采 時間:2020-11-27 22:03:43
        文檔

        微信小程序自定義彈窗wcPop插件

        微信小程序自定義彈窗wcPop插件:微信小程序自定義組件彈窗wcPop|小程序消息提示框|toast自定義模板彈窗 平時在開發小程序的時候,彈窗應用場景還是蠻廣泛的,但是微信官方提供的彈窗比較有局限性,不能自定義修改。這個時候首先想到的是自定義組件化開發,就是把彈出框封裝成一個組件,然后
        推薦度:
        導讀微信小程序自定義彈窗wcPop插件:微信小程序自定義組件彈窗wcPop|小程序消息提示框|toast自定義模板彈窗 平時在開發小程序的時候,彈窗應用場景還是蠻廣泛的,但是微信官方提供的彈窗比較有局限性,不能自定義修改。這個時候首先想到的是自定義組件化開發,就是把彈出框封裝成一個組件,然后

        微信小程序自定義組件彈窗wcPop|小程序消息提示框|toast自定義模板彈窗

        平時在開發小程序的時候,彈窗應用場景還是蠻廣泛的,但是微信官方提供的彈窗比較有局限性,不能自定義修改。這個時候首先想到的是自定義組件化開發,就是把彈出框封裝成一個組件,然后多處調用。

        解決了小程序開發自定義彈窗出現后,遮罩層下的頁面仍可以滾動的方法; 給遮罩層的最外層view中加入catchtouchmove=”preventTouchMove” 即可解決該遮罩層點透問題。

        根據需要還可以自定義多個按鈕及事件,另外還新增了仿微信 android、ios彈窗樣式;

        先來展示一些小程序彈窗組件demo圖:

        在需要使用彈窗的頁面引入彈窗js:

        import {wcPop} from '../../utils/component/wcPop/tpl.js';

        /**
         * --------- 小程序彈窗演示函數.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:#4eca33;',
         onTap() {
         console.log('您點擊了確定!');
         }
         }
         ]
         });
         },
        
         //自定義多按鈕
         btnTap05: function(e) {
         wcPop({
         title: '^-^支付是一種態度',
         content: '尊敬的用戶,我們為您提供了“現金支付”和“微信支付兩種方式”,請選擇一種您的常用支付方式進行支付操作?。。?,
         style: 'border-top:5px solid #4eca33;max-width:90%', //自定義彈窗樣式
         anim: 'fadeInUp',
         opacity: .85,
        
         btns: [
         {
         text: '微信支付',
         style: 'color:#4eca33;',
         onTap() {
         console.log('您選擇了微信支付!');
         }
         },
         {
         text: '支付寶支付',
         style: 'color:#e63d23;',
         onTap() {
         console.log('您選擇了支付寶支付!');
         }
         },
         {
         text: '取消',
         onTap() {
         console.log('您取消了支付請求!');
         wcPop.close();
         }
         }
         ]
         });
         },

        總結

        以上所述是小編給大家介紹的微信小程序自定義彈窗wcPop插件,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持!

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

        微信小程序自定義彈窗wcPop插件

        微信小程序自定義彈窗wcPop插件:微信小程序自定義組件彈窗wcPop|小程序消息提示框|toast自定義模板彈窗 平時在開發小程序的時候,彈窗應用場景還是蠻廣泛的,但是微信官方提供的彈窗比較有局限性,不能自定義修改。這個時候首先想到的是自定義組件化開發,就是把彈出框封裝成一個組件,然后
        推薦度:
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 真实国产乱子伦精品免费| 丁香花在线观看免费观看图片 | 人妻仑乱A级毛片免费看| 四虎成人免费大片在线| 伊人久久五月丁香综合中文亚洲| 亚洲免费福利视频| 亚洲国产av一区二区三区丶| 1a级毛片免费观看| 亚洲人成网站看在线播放| 午夜国产精品免费观看| 中日韩亚洲人成无码网站| 午夜成人免费视频| 羞羞视频免费网站日本| 国产日产亚洲系列| 亚洲a一级免费视频| 亚洲精品视频在线播放| 午夜爱爱免费视频| 特级毛片免费播放| 亚洲成av人片天堂网| 99久热只有精品视频免费看| 亚洲AV无码精品蜜桃| 日韩精品视频免费网址| 亚州**色毛片免费观看| 久久精品国产精品亚洲艾| 99久久国产热无码精品免费| 日本亚洲欧美色视频在线播放| 亚洲国产精品专区在线观看| 国产精品网站在线观看免费传媒| 亚洲沟沟美女亚洲沟沟| 女人18毛片特级一级免费视频 | 亚洲国产熟亚洲女视频| 午夜亚洲福利在线老司机| 中国在线观看免费的www| 亚洲伊人久久大香线蕉影院| 国产无遮挡吃胸膜奶免费看视频 | 成人精品综合免费视频| 亚洲国产精品成人精品无码区在线| 91免费在线播放| 免费看一级一级人妻片| 亚洲网址在线观看| 亚洲国产综合精品一区在线播放|