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ù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了功能強大的Bootstrap組件，介紹js結合Bootstrap組件的使用方法，感興趣的小伙伴們可以參考一下2016-08-08
BootStrap框架個人總結(bootstrap框架、導航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標簽頁
這篇文章主要介紹了BootStrap框架個人總結(bootstrap框架、導航條、下拉菜單、輪播廣告carousel、柵格系統(tǒng)布局、標簽頁tabs、模態(tài)框、菜單定位)的相關資料,需要的朋友可以參考下2016-12-12
可以根據(jù)按的鍵盤上的鍵，顯示鍵盤動作，并顯示keyCode值等2008-06-06
javascript實現(xiàn)鼠標移到Image上方時顯示文字效果的方法
這篇文章主要介紹了javascript實現(xiàn)鼠標移到Image上方時顯示文字效果的方法,涉及javascript鼠標事件及圖文屬性動態(tài)設置的相關技巧,可用于為圖片增加文字提示效果,需要的朋友可以參考下2015-08-08
js清空表單數(shù)據(jù)的兩種方式(遍歷+reset)
這篇文章主要介紹了js清空表單數(shù)據(jù)的兩種方式(遍歷+reset),需要的朋友可以參考下2014-07-07
詳解JS中的this、apply、call、bind(經典面試題)
JS中的this、apply、call、bind是一道經典面試題，最好還是了解一下 this 的指向和 call、apply、bind 三者的區(qū)別。下面就跟隨腳本之家小編一起學習this、apply、call、bind的知識吧2017-09-09
這篇文章主要介紹了js實現(xiàn)單行文本向上滾動效果,大家參考使用吧2013-11-11
JavaScript 選中文字并響應獲取的實現(xiàn)代碼
當鼠標選擇一段文字時，對這個事件產生響應，并且將選中的文字傳遞出去。2011-08-08
微信小程序scroll-view實現(xiàn)左右聯(lián)動
這篇文章主要為大家詳細介紹了微信小程序scroll-view實現(xiàn)左右聯(lián)動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了JS集成fckeditor及判斷內容是否為空的方法,涉及fckeditor的設置及頁面元素的操作技巧,并分析了php環(huán)境下配置文件上傳的注意事項,需要的朋友可以參考下2016-05-05