一、問(wèn)題復(fù)現(xiàn)

調(diào)用彈窗的事件和彈窗自定義樣式：
注意，這個(gè)時(shí)候第二行代碼中點(diǎn)擊觸發(fā)showBagDetail函數(shù)的盒子的父元素與uni-popup組件是同級(jí)的，也就是比uni-popup低一級(jí)

<view class="shoppingBag" v-if="showShoppingBag">
	<view class="shoppingBag-bagIcon" @tap="showBagDetail('bottom')">//點(diǎn)擊觸發(fā)彈出彈框的自定義函數(shù)，彈出方式為bottom
		<image class="shoppingBag-bagIcon-img" src="../../static/images/orderPic/shoppingBag.png" ></image>
	</view>
	
	<view class="shoppingBag-price">
		<view class="shoppingBag-price-text">￥{{shoppingBagPrice}}</view>
		<view class="shoppingBag-number">共{{bagNumber}}件</view>
	</view>
	
	<view class="shoppingBag-checkoutIcon">
		<view class="shoppingBag-checkoutIcon-text">去結(jié)算</view>
	</view>
</view>		

<!-- 點(diǎn)擊購(gòu)物車圖標(biāo)后底部彈出彈窗顯示當(dāng)前購(gòu)物車內(nèi)商品詳情，提供結(jié)算入口begin -->
<uni-popup
	ref="popupBag"
	type="bottom" 
	backgroundColor="#FFFFFF">
	<view class="bagDetail">
		
	</view>
</uni-popup>
<!-- 點(diǎn)擊購(gòu)物車圖標(biāo)后底部彈出彈窗顯示當(dāng)前購(gòu)物車內(nèi)商品詳情，提供結(jié)算入口end -->

uni-popup中自定義元素塊的樣式：

.bagDetail{
	width: 650rpx;
	height: 650rpx;
	background-color: #0151C7;
	border-radius: 20rpx 20rpx 0 0;
	display: flex;
}

調(diào)用彈窗彈出方法的函數(shù)：

showBagDetail(type){
	this.type = type;
	// console.log(this.$refs.popupBag)
	this.$refs.popupBag.open(type)	
}

效果：

可以看到只彈出來(lái)了一個(gè)小白邊，這個(gè)小白邊還是uni-popup組件自帶的與底部的空隙

二、解決方法

讓第二行代碼中點(diǎn)擊觸發(fā)showBagDetail函數(shù)的盒子與uni-popup組件同級(jí)
也就是這樣：

<view class="shoppingBag" v-if="showShoppingBag">
	<view class="shoppingBag-bagIcon" @tap="showBagDetail('bottom')">
		<image class="shoppingBag-bagIcon-img" src="../../static/images/orderPic/shoppingBag.png" ></image>
	</view>
	
	<view class="shoppingBag-price">
		<view class="shoppingBag-price-text">￥{{shoppingBagPrice}}</view>
		<view class="shoppingBag-number">共{{bagNumber}}件</view>
	</view>
	
	<view class="shoppingBag-checkoutIcon">
		<view class="shoppingBag-checkoutIcon-text">去結(jié)算</view>
	</view>
	<!-- 點(diǎn)擊購(gòu)物車圖標(biāo)后底部彈出彈窗顯示當(dāng)前購(gòu)物車內(nèi)商品詳情，提供結(jié)算入口begin -->
	<uni-popup
		ref="popupBag"
		type="bottom" 
		backgroundColor="#FFFFFF">
		<view class="bagDetail">
			
		</view>
	</uni-popup>
	<!-- 點(diǎn)擊購(gòu)物車圖標(biāo)后底部彈出彈窗顯示當(dāng)前購(gòu)物車內(nèi)商品詳情，提供結(jié)算入口end -->
</view>

其他的代碼都和以前一樣
效果：

問(wèn)題解決

但是如果把uni-popup組件放到調(diào)用它的盒子里面，也就是uni-popup組件被它的父元素調(diào)用，會(huì)出現(xiàn)無(wú)法關(guān)閉彈窗的情況。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-502001.html

到了這里，關(guān)于[uni-app]uni-popup組件彈出異常的解決方案的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！