百度智能小程式彈窗組件wcPop|智能小程式自定義model彈窗模板

来源:https://www.cnblogs.com/xiaoyan2017/archive/2018/11/30/10041942.html
-Advertisement-
Play Games

百度智能小程式自定義彈窗組件wcPop|百度小程式model對話框|智能小程式彈窗界面模板 最近百度也推出了自己的智能小程式,如是就趕緊去試了下,官方提供的api還不是狠完整。而且官方提供的彈窗組件也不能滿足一些複雜展示場景,所以就自己動手封裝了個智能小程式彈窗wcPop自定義模板插件。 百度智能小 ...


百度智能小程式自定義彈窗組件wcPop|百度小程式model對話框|智能小程式彈窗界面模板

最近百度也推出了自己的智能小程式,如是就趕緊去試了下,官方提供的api還不是狠完整。而且官方提供的彈窗組件也不能滿足一些複雜展示場景,所以就自己動手封裝了個智能小程式彈窗wcPop自定義模板插件。

百度智能小程式wcPop支持多種動畫展示形式,超精簡調用api,可自定義多按鈕事件,隨意自定義彈窗模板內容。

 

智能小程式彈窗demo展示:

 

插件調用api超簡潔,易於上手,只需在需要調用的頁面引入tpl.js即可:

/**
 * @title     百度小程式自定義彈窗demo
 * @Create    andy
 * @Timer    2018/11/29 23:50:45 GMT+0800 (中國標準時間)
 * @bolg    https://www.cnblogs.com/xiaoyan2017   Q:282310962  wx:xy190310
 */

// 引入插件js
import {wcPop} from '../../utils/component/wcPop/tpl.js';

Page({
    data: {},
    onLoad: function () {
        // 頁面載入
    },


    /**
     * --------- 百度小程式彈窗演示函數.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:#3388ff;',
            onTap() {
                console.log('您點擊了確定!');
            }
            }
        ]
        });
    },

    //自定義多按鈕
    btnTap05: function(e) {
        wcPop({
        title: '^-^悠然的時光',
        content: '漫長時光里流露出無限溫柔で,要努力做好這一切,時刻準備向前,多年後必會感謝曾經努力的自己',
        style: 'border-top:5px solid #3388ff;max-width:90%', //自定義彈窗樣式
        anim: 'fadeInUp',
        opacity: .85,

        btns: [
            {
            text: '發消息',
            style: 'color:#179b16;',
            onTap() {
                console.log('您點擊了發消息!');
            }
            },
            {
            text: '評論他',
            style: 'color:#3388ff;',
            onTap() {
                console.log('您點擊了發送該名片!');
            }
            },
            {
            text: '贊一下',
            onTap() {
                console.log('您點擊了贊一下!');
                wcPop.close();
            }
            }
        ]
        });
    },

    //底部對話框
    btnTap06: function(e) {
        wcPop({
        skin: 'footer',
        content: '確定刪除該條數據嗎?刪除後可在7天之內恢複數據,超過7天後數據就無法恢復啦!',
        anim: 'footer',
        shadeClose: false,

        btns: [
            {
            text: '恢復',
            style: 'color:#3388ff;',
            onTap() {
                console.log('您點擊了恢復!');

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

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

});

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一、Apple 開發者網站 官方文檔 https://developer.apple.com/documentation 除了這兩個、還有 Core Foundation Core Animation Core Image 等、 趕快點擊網站去瞧瞧吧 https://developer.apple. ...
  • Android activity的生命周期這一張圖就夠了。 驗證結果: 值得註意的是從activity A >activity B是先執行A的onPause然後走B的生命周期最後才走A的onStop,同理從activity B按返回鍵時B進入onPause 然後走完A的生命周期在走B的onStop和 ...
  • 如何實現給分類“添加成員變數”? 預設情況下,因為分類底層結構的限制,不能添加成員變數到分類中。但可以通過關聯對象來間接實現 關聯對象提供了以下API 1> 添加關聯對象 void objc_setAssociatedObject(id object, const void * key, id va ...
  • 1. GCD 簡介 Grand Central Dispatch(GCD)是非同步執行任務的技術之一。一般將應用程式中記述的線程管理用的代碼在系統級中實現。開發者只需要定義想執行的任務並追加到適當的Dispatch Queue中,GCD就能生成必要的線程並計劃執行任務。由於線程管理是作為系統的一部分來 ...
  • 為了更好的用戶體驗,煎熬了許久,得到這麼個解決方案。在此記錄下來,以供後來者參考。 第一部分 清單文件中組件activity的android:windowSoftInputMode屬性值的含義: 【A】stateUnspecified:軟鍵盤的狀態並沒有指定,系統將選擇一個合適的狀態或依賴於主題的設 ...
  • 簡介: Application和Activity、Service一樣,都是Android框架的一個系統組件,每一個應用都有一個Application,Application的生命周期也就是整個app的生命周期。 特點: 實例的創建方式:單例模式 每一個app運行是會首先會創建Application類 ...
  • XKZoomingView.h XKZoomingView.m USE ELSE ...
  • 使用jQuery增加或刪除元素(內容):一、jQuery添加元素或內容:1,append() 方法:在被選元素的結尾插入元素或內容 2,prepend() 方法:被選元素的開頭插入元素或內容。 3,after() 方法:在被選元素之後插入內容。 4,before() 方法:在被選元素之前插入內容。註 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...