小程序展示彈窗常見API實例詳解
展示彈窗常見的API
小程序中展示彈窗有四種方式:
showToast
、showModal
、showLoading
、showActionSheet
showToast
顯式消息提示框
有如下一些屬性:
屬性 | 類型 | 默認(rèn)值 | 必填說明 | |
---|---|---|---|---|
title | string | 是 | 提示的內(nèi)容 | |
icon | string | success | 否 | 圖標(biāo) |
image | string | 否 | 自定義圖標(biāo)的本地路徑,image 的優(yōu)先級高于 icon | |
duration | number | 1500 | 否 | 提示的內(nèi)容展示的時機(jī) |
mask | boolean | false | 否 | 是否顯示透明蒙層,防止觸摸穿透 |
success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
其中icon屬性有如下一些值:
合法值 | 說明 |
---|---|
success | 顯示成功圖標(biāo),此時 title 文本最多顯示 7 個漢字長度 |
error | 顯示失敗圖標(biāo),此時 title 文本最多顯示 7 個漢字長度 |
loading | 顯示加載圖標(biāo),此時 title 文本最多顯示 7 個漢字長度 |
none | 不顯示圖標(biāo),此時 title 文本最多可顯示兩行,1.9.0及以上版本支持 |
演示代碼
wx.showToast({ title: "購買失敗", icon: "error", duration: 100, mask: true, success: (res) => { console.log("展示成功: ", res); }, fail: (err) => { console.log("展示失敗: ", err); } })
showModal
顯示模態(tài)對話框
常見屬性如下:
屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
---|---|---|---|---|
title | string | 否 | 提示的標(biāo)題 | |
content | string | 否 | 提示的內(nèi)容 | |
showCancel | boolean | true | 否 | 是否顯示取消按鈕 |
cancelText | string | 取消 | 否 | 取消按鈕的文字,最多 4 個字符 |
cancelColor | string | #000000 | 否 | 取消按鈕的文字顏色,必須是 16 進(jìn)制格式的顏色字符串 |
confirmText | string | 確定 | 否 | 確認(rèn)按鈕的文字,最多 4 個字符 |
confirmColor | string | #576B95 | 否 | 確認(rèn)按鈕的文字顏色,必須是 16 進(jìn)制格式的顏色字符串 |
editable | boolean | false | 否 | 是否顯示輸入框 |
placeholderText | string | 否 | 顯示輸入框時的提示文本 | |
success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
演示代碼
wx.showModal({ title: "四個二", cancelText: "要不起", cancelColor: '#f00', confirmText: "管上", confirmColor: "skyblue", success: (res) => { console.log("展示成功: ", res); }, fail: (err) => { console.log("展示失敗: ", err); } })
在成功的回調(diào)函數(shù)中, 有如下屬性判斷用戶點(diǎn)擊了確定還是取消
屬性 | 類型 | 說明 |
---|---|---|
content | string | editable 為 true 時,用戶輸入的文本 |
confirm | boolean | 為 true 時,表示用戶點(diǎn)擊了確定按鈕 |
cancel | boolean | 為 true 時,表示用戶點(diǎn)擊了取消(用于 Android 系統(tǒng)區(qū)分點(diǎn)擊蒙層關(guān)閉還是點(diǎn)擊取消按鈕關(guān)閉) |
wx.showModal({ title: "四個二", cancelText: "取消", confirmText: "確定", success: (res) => { console.log("展示成功: ", res); if (res.cancel) { console.log("用戶點(diǎn)擊了左邊取消按鈕"); } else if (res.confirm) { console.log("用戶點(diǎn)擊了右邊確定按鈕"); } }, fail: (err) => { console.log("展示失敗: ", err); } })
showLoading
顯示 loading 提示框。與showToast的區(qū)別是, 守衛(wèi)Loading需主動調(diào)用
wx.hideLoading
才能關(guān)閉提示框
其中的屬性如下:
屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
---|---|---|---|---|
title | string | 是 | 提示的內(nèi)容 | |
mask | boolean | false | 否 | 是否顯示透明蒙層,防止觸摸穿透 |
success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
演示代碼
wx.showLoading({ title: '加載中', mask: true, success: (res) => { console.log(res); }, fail: (err) => { console.log(err); } })
showActionSheet
顯示操作菜單
屬性 | 類型 | 默認(rèn)值 | 必填 | 說明 |
---|---|---|---|---|
alertText | string | 否 | 警示文案 | |
itemList | Array.<string> | 是 | 按鈕的文字?jǐn)?shù)組,數(shù)組長度最大為 6 | |
itemColor | string | #000000 | 否 | 按鈕的文字顏色 |
success | function | 否 | 接口調(diào)用成功的回調(diào)函數(shù) | |
fail | function | 否 | 接口調(diào)用失敗的回調(diào)函數(shù) | |
complete | function | 否 | 接口調(diào)用結(jié)束的回調(diào)函數(shù)(調(diào)用成功、失敗都會執(zhí)行) |
演示代碼
wx.showActionSheet({ itemList: ["Macbook", "iPad", "iPhone"], itemColor: "#f00", success: (res) => { console.log(res); }, fail: (err) => { console.log(err); } })
成功的回調(diào)res中的屬性
屬性 | 類型 | 說明 |
---|---|---|
tapIndex | number | 用戶點(diǎn)擊的按鈕序號,從上到下的順序,從0開始 |
可以通過tapIndex知道點(diǎn)擊了哪個按鈕
wx.showActionSheet({ itemList: ["Macbook", "iPad", "iPhone"], itemColor: "#f00", success: (res) => { console.log(res .tapIndex); }, fail: (err) => { console.log(err); } })
注意
wx.showToast
和wx.showLoading
同時只能顯示一個
wx.showLoading
和wx.hideLoading
配對使用
總結(jié)
到此這篇關(guān)于小程序展示彈窗常見API的文章就介紹到這了,更多相關(guān)小程序展示彈窗API內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript中的nextSibling使用陷(da)阱(keng)
關(guān)于HTML/XML節(jié)點(diǎn)的問題,在IE中nextSibling不會返回文本節(jié)點(diǎn),而chrome或者firefox等會返回文本節(jié)點(diǎn)2014-05-05JS簡單編號生成器實現(xiàn)方法(附demo源碼下載)
這篇文章主要介紹了JS簡單編號生成器實現(xiàn)方法,涉及JavaScript針對表單與字符串操作的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-04-04js數(shù)值計算時使用parseInt進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換(jquery)
這篇文章主要介紹了js數(shù)值計算時使用parseInt進(jìn)行數(shù)據(jù)類型轉(zhuǎn)換(jquery),需要的朋友可以參考下2014-10-10在JavaScript中對字符串進(jìn)行索引、拆分和操作的示例代碼
字符串是一個包含一個或多個字符的序列,可以由字母、數(shù)字或符號組成,在本教程中,我們將學(xué)習(xí)字符串原始值和String對象之間的區(qū)別,字符串的索引方式,如何訪問字符串中的字符,以及字符串常用的屬性和方法,需要的朋友可以參考下2024-06-06Iframe 自適應(yīng)高度并實時監(jiān)控高度變化的js代碼
不得不用到iframe,且被強(qiáng)烈要求不能讓它出現(xiàn)滾動條!嵌入的頁面肯定是高度不一的,頁面中也不能出現(xiàn)大片空白,所以也不能寫死高度!真是麻鬼煩啊!2009-10-10HBuilderX開發(fā)一個簡單的微信小程序的實現(xiàn)步驟
本文主要介紹了HBuilderX開發(fā)一個簡單的微信小程序的實現(xiàn)步驟,文中通過示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-02-02JS中如何判斷傳過來的JSON數(shù)據(jù)中是否存在某字段
這篇文章主要介紹了JS中如何判斷傳過來的JSON數(shù)據(jù)中是否存在某字段,需要的朋友可以參考下2014-08-08