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

這篇文章主要介紹“uni-app中彈窗的使用與自定義彈窗的方法”，在日常操作中，相信很多人在uni-app中彈窗的使用與自定義彈窗的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對(duì)大家解答”uni-app中彈窗的使用與自定義彈窗的方法”的疑惑有所幫助！接下來，請(qǐng)跟著小編一起來學(xué)習(xí)吧！

一、uni-app中自帶的彈窗

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

二、實(shí)例

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

代碼如下（示例）：

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

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

顯示效果如下：

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è)常用的屬性：

顯示效果如下

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è)常用的屬性：

顯示效果如下:

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

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

附上源碼

<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;
		}

到此，關(guān)于“uni-app中彈窗的使用與自定義彈窗的方法”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！