快捷導(dǎo)航

uni-app中彈窗的使用與自定義彈窗

更新時(shí)間：2022年04月22日 11:10:50 作者：不要叫我狗哥

眾所周知彈窗在我們實(shí)際開(kāi)發(fā)場(chǎng)景中是非常常用的,最近在工作中就遇到了相關(guān)需求,所以下面這篇文章主要給大家介紹了關(guān)于uni-app中彈窗使用與自定義彈窗的相關(guān)資料,需要的朋友可以參考下

一、uni-app中自帶的彈窗

示例：在前端開(kāi)發(fā)中，為了優(yōu)化用戶的交互體驗(yàn)，常需要用到彈窗來(lái)進(jìn)行提示，引導(dǎo)用戶操作，而js里的alter用起來(lái)是真的丑，所有今天看了一下uni-app里的彈窗，感覺(jué)還不錯(cuò)，就記一下。

二、實(shí)例

1、uni.showToast(OBJECT)（消息提示框）

代碼如下（示例）：

uni.showToast({
				title: data[0],
				icon:'exception',
				duration:850
			});

幾個(gè)常用的屬性：

屬性	值類(lèi)型	說(shuō)明
title	String	即消息框中顯示的文本內(nèi)容
icon	String	即顯示的圖標(biāo)，值有{success,error,fail,exception,loading,none}，傳不同的參數(shù)顯示不同的圖標(biāo)效果
duration	Number	消息框顯示的時(shí)間，毫秒為單位
image	Sting	自定義圖標(biāo)的本地路徑（app端暫不支持gif
mask	Boolean	是否顯示透明蒙層，防止觸摸穿透，默認(rèn)：false
position	String	純文本輕提示顯示位置，填寫(xiě)有效值后只有 title 屬性生效，有效值詳見(jiàn)下方說(shuō)明。
success	Function	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

顯示效果如下：

提示彈窗

2、uni.showModal(OBJECT)(顯示兩個(gè)按鈕的提示框)

代碼如下（示例）：

uni.showModal({
				title: data[1],
				content: data[0],
				showCancel:false,
				success: function (res) {
					if (res.confirm) {
						console.log('用戶點(diǎn)擊確定');
					} else if (res.cancel) {
						console.log('用戶點(diǎn)擊取消');
					}
				}
			});

幾個(gè)常用的屬性：

屬性	值類(lèi)型	說(shuō)明
title	String	即消息框的標(biāo)題
content	String	即消息框的內(nèi)容
showCancel	Boolean	可選,是否顯示取消按鈕，bool類(lèi)型,默認(rèn)未true,ture為顯示,false相反
cancelText	String	取消按鈕文本內(nèi)容
confimrText	String	確認(rèn)按鈕文本內(nèi)容
cancelColor	HexColor	取消按鈕文本顏色
confirmColor	HexColor	確認(rèn)按鈕文本顏色
editable	Boolean	是否顯示輸入框
placeholderText	String	顯示輸入框時(shí)的提示文本
success	Function	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

顯示效果如下

帶按鈕的提示框

3、uni.showActionSheet(OBJECT)(從底部向上彈出操作菜單)

代碼如下(示例):

uni.showActionSheet({
					itemList: [data],
					success: function (res) {
						console.log('選中了第' + (res.tapIndex + 1) + '個(gè)按鈕');
					},
					fail: function (res) {
						console.log(res.errMsg);
					}
				});

幾個(gè)常用的屬性：

屬性	值類(lèi)型	說(shuō)明
itemList	Array	按鈕的文字?jǐn)?shù)組
itemColor	HexColor	按鈕的文字顏色，字符串格式，默認(rèn)為"#000000"
popover	Object	大屏設(shè)備彈出原生選擇按鈕框的指示區(qū)域，默認(rèn)居中顯示
success	Function	接口調(diào)用成功的回調(diào)函數(shù)
fail	Function	接口調(diào)用失敗的回調(diào)函數(shù)
complete	Function	接口調(diào)用結(jié)束的回調(diào)函數(shù)（調(diào)用成功、失敗都會(huì)執(zhí)行）

顯示效果如下:

下拉框

補(bǔ)充：uniapp自定義彈窗

基本需求中需要點(diǎn)開(kāi)卡片，設(shè)置卡片中某一列的數(shù)量，這里需要打開(kāi)一個(gè)彈窗設(shè)置，但是uniapp中默認(rèn)的彈窗組件中都沒(méi)有可以提示輸入的，我知道插件市場(chǎng)已有了很多組件，但是今天還是分享一下這個(gè)自己寫(xiě)自定義彈窗。話不多說(shuō)，直接看效果。

附上源碼

<view>
	<view>
		<button @click="showDiv()">出來(lái)吧，我的彈窗！</button>
	</view>
	<view :hidden="userFeedbackHidden" class="popup_content">
		<view class="popup_title">修改數(shù)量</view>
		<view class="popup_textarea_item">
			<input type="text" class="popup_textarea" value=""  v-model="feedbackContent" placeholder="輸入修改的數(shù)量"/>
			<view @click="submitFeedback()" class="buttons">
				<text class="popup_button">確定</text>
			</view>
		</view>
	</view>
	<view class="popup_overlay" :hidden="userFeedbackHidden" @click="hideDiv()"></view>
	</view>

js方法

css樣式屬性

	.popup_overlay {
			position: fixed;
			top: 0%;
			left: 0%;
			width: 100%;
			height: 100%;
			background-color: black;
			z-index: 1001;
			-moz-opacity: 0.8;
			opacity: .80;
			filter: alpha(opacity=88);
		}
		
		.popup_content {
			position: fixed;
			top: 50%;
			left: 50%;
			width: 480rpx;
			height: 240rpx;
			margin-left: -270rpx;
			margin-top: -270rpx;
			border: 10px solid white;
			background-color: white;
			z-index: 1002;
			overflow: auto;
		}
		
		.popup_title {
			width: 480rpx;
			text-align: center;
			font-size: 32rpx;
		}
			 
		.popup_textarea_item {
			padding-top: 5rpx;
			height: 50rpx;
			width: 440rpx;
			background-color: #F1F1F1;
			margin-top: 20rpx;
			margin-left: 20rpx;
			padding-top: 25rpx;
		}
			 
		.popup_textarea {
			width: 410rpx;
			font-size: 26rpx;
			margin-left: 20rpx;
		}
			 
		.popup_button {
			color: #000000;
		}
		.buttons{
			text-align: center;
			font-size: 50rpx;
			margin-top: 40rpx;
			background-color: #007AFF;
		}