uniapp中常用的幾種提示彈框
一、成功提示彈框
在執(zhí)行增、刪、改、查等提交成功后彈出提示。
uni.showToast({
title: '成功提示',
//將值設(shè)置為 success 或者直接不用寫icon這個(gè)參數(shù)
icon: 'success',
//顯示持續(xù)時(shí)間為 2秒
duration: 2000
}) 效果如下：
若icon參數(shù)值設(shè)置為none，將不顯示“√”圖標(biāo)，只顯示文字提示。
uni.showToast({
title: '成功提示',
icon: 'none',
duration: 2000
}) 效果如下：
二、加載提示彈框
在執(zhí)行數(shù)據(jù)查詢、頁面數(shù)據(jù)渲染等過程中彈出提示。以頁面渲染為例：
//前端數(shù)據(jù)請求時(shí)，顯示加載提示彈框
uni.showLoading({
title: '加載中...'
});
// 數(shù)據(jù)從后端接口返回后，提示彈框關(guān)閉
uni.hideLoading();效果如下：
同上，設(shè)置icon參數(shù)值為none，將不顯示加載圖標(biāo)，只顯示文字提示。
三、確認(rèn)取消提示框
在執(zhí)行數(shù)據(jù)刪除等操作時(shí)彈出提示。
uni.showModal({
title: '提示',
content: '確認(rèn)刪除該條信息嗎？',
success: function(res) {
if (res.confirm) {
// 執(zhí)行確認(rèn)后的操作
}
else {
// 執(zhí)行取消后的操作
}
}
})效果如下：
自定義取消、確認(rèn)的內(nèi)容（參數(shù)：cancelText、confirmText）以及字體顏色（confirmColor、cancelColor）。
uni.showModal({
title: '提示',
// 提示文字
content: '確認(rèn)刪除該條信息嗎？',
// 取消按鈕的文字自定義
cancelText: "取消",
// 確認(rèn)按鈕的文字自定義
confirmText: "刪除",
//刪除字體的顏色
confirmColor:'red',
//取消字體的顏色
cancelColor:'#000000',
success: function(res) {
if (res.confirm) {
// 執(zhí)行確認(rèn)后的操作
}
else {
// 執(zhí)行取消后的操作
}
}
})效果如下：
四、列表選擇提示彈框
執(zhí)行某些列表選擇時(shí)彈出提示。
uni.showActionSheet({
itemList: ['選項(xiàng)一', '選項(xiàng)二', '選項(xiàng)三'],
success (res) {
// 選擇其中任意一項(xiàng)后，獲取其索引（res.tapIndex），從0開始
console.log(res.tapIndex)
},
fail (res) {
// 取消后的操作
}
})效果如下：
若需要設(shè)置字體顏色，可以配置itemColor參數(shù)。
uni.showActionSheet({
itemList: ['選項(xiàng)一', '選項(xiàng)二', '選項(xiàng)三'],
// 字體顏色
itemColor: "#55aaff",
success (res) {
// 選擇其中任意一項(xiàng)后，獲取其索引（res.tapIndex），從0開始
console.log(res.tapIndex)
},
fail (res) {
// 取消后的操作
}
})效果如下：
五、自定義圖標(biāo)
可以自定義顯示圖標(biāo)，如png、jpg、gif等格式。
uni.showToast({
title: '查詢中',
//圖片位置
image: '../../static/loading.gif',
duration: 2000
})效果如下：
總結(jié)
到此這篇關(guān)于uniapp中常用的幾種提示彈框的文章就介紹到這了,更多相關(guān)uniapp常用提示彈框內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了js中取得變量絕對值的方法,較為詳細(xì)的分析了js中abs方法取絕對值的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-01-01
這篇文章主要詳細(xì)介紹了JS合并兩個(gè)數(shù)組的方法，文中有詳細(xì)的代碼示例，對我們學(xué)習(xí)JS有一定的幫助，感興趣的同學(xué)可以參考一下2023-06-06
JavaScript中實(shí)現(xiàn)單體模式分享
這篇文章主要介紹了JavaScript中實(shí)現(xiàn)單體模式分享,單體模式的定義：單體是一個(gè)用來劃分命名空間并將一批相關(guān)方法和屬性組織在一起的對象,如果它能夠被實(shí)例化,那么只能被實(shí)例化一次,需要的朋友可以參考下2015-01-01
JS實(shí)現(xiàn)的檢驗(yàn)身份證格式并輸出出生日期，年齡，性別，出生地示例
這篇文章主要介紹了JS實(shí)現(xiàn)的檢驗(yàn)身份證格式并輸出出生日期，年齡，性別，出生地,涉及javascript字符串遍歷、運(yùn)算、轉(zhuǎn)換等相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
讓Firefox支持event對象實(shí)現(xiàn)代碼
FireFox并沒有 window.event ,所以在FireFox下編寫事件處理函數(shù)是很麻煩的事。如果要得到 event 對象,就必須要聲明時(shí)間處理函數(shù)的第一個(gè)參數(shù)為event2009-11-11
原生js提示框并自動關(guān)閉(手工關(guān)閉)
今天在寫后臺交互的時(shí)候原來都是用alert太難看每次都需要點(diǎn)擊一下才可以，比較麻煩所以特整理了幾個(gè)比較好的js提示框代碼，方便提示一下2023-04-04
webpack4.0打包優(yōu)化策略整理小結(jié)
這篇文章主要介紹了webpack4.0打包優(yōu)化策略整理小結(jié)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-03-03
JavaScript設(shè)計(jì)模型Iterator實(shí)例解析
這篇文章主要介紹了JavaScript設(shè)計(jì)模型Iterator實(shí)例解析,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-01-01
Firefox/Safari/Chrome/Opera瀏覽器中使用exec方法時(shí)可以去掉“exec”用 “正則直接量+()” 方式使用2011-05-05
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)彈出菜單動畫，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06