欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年09月15日 10:38:31   作者:林有酒  
彈窗對我們大家來說應(yīng)該都不陌生,這篇文章主要給大家介紹了關(guān)于小程序展示彈窗常見API的相關(guān)資料,主要包括showToast,?showModal,showLoading和showActionSheet,需要的朋友可以參考下

展示彈窗常見的API

小程序中展示彈窗有四種方式: showToastshowModalshowLoading、 showActionSheet

showToast

顯式消息提示框

有如下一些屬性:

屬性類型默認(rèn)值 必填說明
titlestring 提示的內(nèi)容
iconstringsuccess圖標(biāo)
imagestring 自定義圖標(biāo)的本地路徑,image 的優(yōu)先級高于 icon
durationnumber1500提示的內(nèi)容展示的時機(jī)
maskbooleanfalse是否顯示透明蒙層,防止觸摸穿透
successfunction 接口調(diào)用成功的回調(diào)函數(shù)
failfunction 接口調(diào)用失敗的回調(diào)函數(shù)
completefunction 接口調(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)值必填說明
titlestring 提示的標(biāo)題
contentstring 提示的內(nèi)容
showCancelbooleantrue是否顯示取消按鈕
cancelTextstring取消取消按鈕的文字,最多 4 個字符
cancelColorstring#000000取消按鈕的文字顏色,必須是 16 進(jìn)制格式的顏色字符串
confirmTextstring確定確認(rèn)按鈕的文字,最多 4 個字符
confirmColorstring#576B95確認(rèn)按鈕的文字顏色,必須是 16 進(jìn)制格式的顏色字符串
editablebooleanfalse是否顯示輸入框
placeholderTextstring 顯示輸入框時的提示文本
successfunction 接口調(diào)用成功的回調(diào)函數(shù)
failfunction 接口調(diào)用失敗的回調(diào)函數(shù)
completefunction 接口調(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)擊了確定還是取消

屬性類型說明
contentstringeditable 為 true 時,用戶輸入的文本
confirmboolean為 true 時,表示用戶點(diǎn)擊了確定按鈕
cancelboolean為 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)值必填說明
titlestring 提示的內(nèi)容
maskbooleanfalse是否顯示透明蒙層,防止觸摸穿透
successfunction 接口調(diào)用成功的回調(diào)函數(shù)
failfunction 接口調(diào)用失敗的回調(diào)函數(shù)
completefunction 接口調(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)值必填說明
alertTextstring 警示文案
itemListArray.<string> 按鈕的文字?jǐn)?shù)組,數(shù)組長度最大為 6
itemColorstring#000000按鈕的文字顏色
successfunction 接口調(diào)用成功的回調(diào)函數(shù)
failfunction 接口調(diào)用失敗的回調(diào)函數(shù)
completefunction 接口調(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中的屬性

屬性類型說明
tapIndexnumber用戶點(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.showToastwx.showLoading同時只能顯示一個

wx.showLoadingwx.hideLoading配對使用

總結(jié) 

到此這篇關(guān)于小程序展示彈窗常見API的文章就介紹到這了,更多相關(guān)小程序展示彈窗API內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論