uniapp中常用的幾種提示彈框

Posted on by

一、成功提示彈框

在執行增、刪、改、查等提交成功後彈出提示。

uni.showToast({
	title: '成功提示',
	//將值設置為 success 或者直接不用寫icon這個參數
	icon: 'success',
	//顯示持續時間為 2秒
	duration: 2000
})

效果如下：

若icon參數值設置為none，將不顯示“√”圖標，隻顯示文字提示。

uni.showToast({
	title: '成功提示',
	icon: 'none',
	duration: 2000
})

效果如下：

二、加載提示彈框

 在執行數據查詢、頁面數據渲染等過程中彈出提示。以頁面渲染為例：

//前端數據請求時，顯示加載提示彈框
uni.showLoading({
	title: '加載中...'
});
// 數據從後端接口返回後，提示彈框關閉
uni.hideLoading();

效果如下：

同上，設置icon參數值為none，將不顯示加載圖標，隻顯示文字提示。 

三、確認取消提示框 

在執行數據刪除等操作時彈出提示。 

uni.showModal({
		title: '提示',
		content: '確認刪除該條信息嗎？',
		success: function(res) {
		if (res.confirm) {
		    // 執行確認後的操作
		} 
		else {
			// 執行取消後的操作
		}
	}
})

 效果如下：

 自定義取消、確認的內容（參數：cancelText、confirmText）以及字體顏色（confirmColor、cancelColor）。

uni.showModal({
		title: '提示',
		// 提示文字
		content: '確認刪除該條信息嗎？',
		// 取消按鈕的文字自定義
		cancelText: "取消",
		// 確認按鈕的文字自定義
		confirmText: "刪除",
		//刪除字體的顏色
		confirmColor:'red',
		//取消字體的顏色
		cancelColor:'#000000',
		success: function(res) {
		if (res.confirm) {
			// 執行確認後的操作
		} 
		else {
			// 執行取消後的操作
		}
	}
})

 效果如下：

四、列表選擇提示彈框

 執行某些列表選擇時彈出提示。

uni.showActionSheet({
	itemList: ['選項一', '選項二', '選項三'],
	success (res) {
	   // 選擇其中任意一項後，獲取其索引（res.tapIndex），從0開始
	   console.log(res.tapIndex) 
	},
	fail (res) {
	   // 取消後的操作
	}
})

效果如下：

 若需要設置字體顏色，可以配置itemColor參數。

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常用提示彈框內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：