快捷導(dǎo)航

小程序展示彈窗常見API實例詳解

更新時間：2022年09月15日 10:38:31 作者：林有酒

彈窗對我們大家來說應(yīng)該都不陌生,這篇文章主要給大家介紹了關(guān)于小程序展示彈窗常見API的相關(guān)資料,主要包括showToast,?showModal,showLoading和showActionSheet,需要的朋友可以參考下

展示彈窗常見的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);
  }
})

注意