標籤：需求 res toast 好的 作用 success tle hex XML
一、toast 訊息提示框
他用到了一個wx.showToast(object) 這樣一個方法。作用是顯示提示框。
/* ---page/test/test.wxml----*/ <button bindtap="binToast">toast<button/> /* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/Page({ binToast:function(){ wx.showToast({ title: ‘成功‘, icon: ‘success‘, duration: 2000 }) }, })/* ---page/test/test.js----*/ |
| 參數 |
類型 |
必填 |
說明 |
| title |
String |
是 |
提示的內容 |
| icon |
String |
否 |
表徵圖，只支援"success"、"loading" |
| duration |
Number |
否 |
提示的延遲時間，單位毫秒，預設：1500, 最大為10000 |
| success |
Function |
否 |
介面調用成功的回呼函數 |
| fail |
Function |
否 |
介面調用失敗的回呼函數 |
| complete |
Function |
否 |
介面調用結束的回呼函數（調用成功、失敗都會執行） |
如果是wxml的寫法 那麼loading和toast會寫兩個標籤 其實他們使用的方法都是一樣的。。所以那種寫法很難受。不過js的這種寫法很好的解決了這個問題。來看一下loading
二、loading 載入
他用到了一個wx.hideToast()作用是隱藏提示框。我們展示了提示框之後。可以選擇什麼時候關掉他。。這樣就起到了載入的作用。
/* ---page/test/test.wxml----*/<button bindtap="binLoading">binLoading<button/>/* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/Page({ binLoading:function(){ wx.showToast({ title: ‘載入中‘, icon: ‘loading‘, duration: 10000 }) setTimeout(function(){ wx.hideToast() },2000) }, }) /* ---page/test/test.js----*/ |
可以看到這個方法。。。雖然給了duration：10000毫秒後自動消失的屬性，可是用了一個用setTimeout來控制時間2秒後關閉 toast 。所以時間就不用等10秒那麼麻煩了。其實 可以把setTimeout 換成ajax 取值。這樣等非同步取值完之後在執行wx.hideToast()那麼就形成了一個載入的樣子。
三、modal 對話方塊
| 參數 |
類型 |
必填 |
說明 |
| title |
String |
是 |
提示的標題 |
| content |
String |
是 |
提示的內容 |
| showCancel |
Boolean |
否 |
是否顯示取消按鈕，預設為 true |
| cancelText |
String |
否 |
取消按鈕的文字，預設為"取消"，最多 4 個字元 |
| cancelColor |
HexColor |
否 |
取消按鈕的文字顏色，預設為"#000000" |
| confirmText |
String |
否 |
確定按鈕的文字，預設為"確定"，最多 4 個字元 |
| confirmColor |
HexColor |
否 |
確定按鈕的文字顏色，預設為"#3CC51F" |
| success |
Function |
否 |
介面調用成功的回呼函數，返回res.confirm為true時，表示使用者點擊確定按鈕 |
| fail |
Function |
否 |
介面調用失敗的回呼函數 |
| complete |
Function |
否 |
介面調用結束的回呼函數（調用成功、失敗都會執行） |
/* ---page/test/test.wxml----*/<button bindtap="bindModal">Modal<button/>/* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/Page({ bindModal:function(){ wx.showModal({ title: ‘提示‘, content: ‘這是一個模態彈窗‘, success: function(res) { if (res.confirm) { console.log(‘使用者點擊確定‘) } } }) }, })/* ---page/test/test.js----*/ |
需要注意的就是success毀掉函數的 res.confirm了 當為true的時候 則表示使用者點擊了確定。
四、action-sheet 操作菜單
| 參數 |
類型 |
必填 |
說明 |
| itemList |
String Array |
是 |
按鈕的文字數組，數組長度最大為6個 |
| itemColor |
HexColor |
否 |
按鈕的文字顏色，預設為"#000000" |
| success |
Function |
否 |
介面調用成功的回呼函數，詳見返回參數說明 |
| fail |
Function |
否 |
介面調用失敗的回呼函數 |
| complete |
Function |
否 |
介面調用結束的回呼函數（調用成功、失敗都會執行） |
/* ---page/test/test.wxml----*/<button bindtap="bindActionSheet">ActionSheet<button/>/* ---page/test/test.wxml----*/ |
/* ---page/test/test.js----*/Page({ bindActionSheet:function(){ wx.showActionSheet({ itemList: [‘A‘, ‘B‘, ‘C‘], success: function(res) { if (!res.cancel) { console.log(res.tapIndex) } } }) }, })/* ---page/test/test.js----*/ |
這裡則跟wxml完全不一樣 。這裡則是利用res.tapIndex 來擷取 使用者選的是那個選項。而且也不用像wxml那麼麻煩每次還要手動去隱藏。。不過看需求。有利也有弊。
九： 操作提示（js版本）
