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

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

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

一、uni-app中自帶的彈窗

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

二、實例

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

代碼如下（示例）：

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

幾個常用的屬性：

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

顯示效果如下：

提示彈窗

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

代碼如下（示例）：

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

幾個常用的屬性：

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

顯示效果如下

帶按鈕的提示框

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

代碼如下(示例):

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

幾個常用的屬性：

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

顯示效果如下:

下拉框

補充：uniapp自定義彈窗

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

附上源碼

<view>
	<view>
		<button @click="showDiv()">出來吧，我的彈窗！</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;
		}