微信開發之自定義元件（Toast）

分享一個自定義的toast元件。下面我在這裡做粗略的分享，不好的地方請多多指教。

首先，我們來看看官方給的wx.showToas這個API的展示形式：

或者是loading狀態的：

它的用法也非常簡單，直接copy官方API程式碼就直接可以使用，官方程式碼：

非常簡潔，更多可以去官網學習，在這裡就不多講了。官方給的這個API中有提到如何更改提示的內容，但是除了這個好像並沒有提到如何自定義樣式，及顯示自定義圖示等方法，所以在專案上實用之處就非常少了，我總不能彈出一個報錯的提示框也是這兩種當中選一種吧？為此，我只能自己根據需求開發一個自定義的toast元件。

 那麼下面我就分享一個自己寫的toast元件（全域性）：

1、在component目錄中新建一個toastTest目錄，如圖：

 

2、在toastTest.wxml檔案中新建一個template（自定義元件模組），程式碼如圖所示：

3、至於顯示的樣式我就不做解釋了，直接看程式碼，當然你們可以根據自己的方式書寫樣式：

4、toastTest.js的程式碼如下：

在_comData中你可以新增你想展示的內容，如：title、pic等都可以往裡面塞，只是你要在樣式表中做相應的樣式處理即可；toastPannel物件中是包含了一些自定義的方法，如我的程式碼中有切換元件顯示隱藏的開關和接收到的顯示內容；ToastPannel是一個建構函式，在這裡需要通過官方給出的getCurrentPages()方法獲取到要使用元件的當前頁，並且將該元件的data和相應的方法附加到當前頁面中，方便當前頁訪問；最後將該元件的建構函式暴露出來，讓其他頁面可以直接引用。

6、全域性引用，在專案中的app.js中將元件指令碼引入供全域性使用，引入方法：接收暴露出來的建構函式

並且全域性引入元件的樣式表：

7、在需要使用該元件的頁面將模組引入，如我在toastDemo目錄中的toast.wxml檔案中引入元件的模組：

8、在當前頁面的js檔案中例項元件的建構函式，如我的toast.js檔案中例項程式碼：

9、toast自定義元件實現的效果：

上述只是分享了全域性引用，如果想區域性引用的話，原理也是一樣的，只是把全域性引入變為區域性引入即可，以上即是本小白的分享，還請各大牛請噴。

注：這只是該元件展示最簡單的內容，自己可以新增喜歡的東西，抱歉！！！

本文轉自：https://www.cnblogs.com/Jacky-MYD/articles/7372365.html