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