亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

uniapp中常用的幾種提示彈框

 更新時(shí)間：2022年09月16日 09:57:12   作者：薇森  
在前端開發(fā)中,為了優(yōu)化用戶的交互體驗(yàn),常需要用到彈窗來進(jìn)行提示,引導(dǎo)用戶操作,下面這篇文章主要給大家介紹了關(guān)于uniapp中常用的幾種提示彈框的相關(guān)資料,需要的朋友可以參考下

一、成功提示彈框

在執(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ù)請(qǐng)求時(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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論