[uni-app] solution d'exception contextuelle du composant uni-popup

1. Récurrence du problème

Appelez l'événement de la fenêtre pop-up et le style personnalisé de la fenêtre pop-up :
Notez qu'à ce moment, l'élément parent de la boîte qui déclenche la fonction showBagDetail dans la deuxième ligne de code est au même niveau que le composant uni-popup, c'est-à-dire un niveau inférieur à uni-popup

<view class="shoppingBag" v-if="showShoppingBag">
	<view class="shoppingBag-bagIcon" @tap="showBagDetail('bottom')">//点击触发弹出弹框的自定义函数，弹出方式为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">去结算</view>
	</view>
</view>		

<!-- 点击购物车图标后底部弹出弹窗显示当前购物车内商品详情，提供结算入口begin -->
<uni-popup
	ref="popupBag"
	type="bottom" 
	backgroundColor="#FFFFFF">
	<view class="bagDetail">
		
	</view>
</uni-popup>
<!-- 点击购物车图标后底部弹出弹窗显示当前购物车内商品详情，提供结算入口end -->

Styles pour les blocs d'éléments personnalisés dans uni-popup :

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

La fonction qui appelle la méthode pop-up de la fenêtre pop-up :

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

Effet :

Vous pouvez voir que seule une petite bordure blanche apparaît, et cette petite bordure blanche est toujours l'espace entre le composant uni-popup et le bas

Deux, la solution

Faites en sorte que la boîte qui déclenche la fonction showBagDetail clique sur la deuxième ligne de code au même niveau que le composant uni-popup
C'est ça:

<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">去结算</view>
	</view>
	<!-- 点击购物车图标后底部弹出弹窗显示当前购物车内商品详情，提供结算入口begin -->
	<uni-popup
		ref="popupBag"
		type="bottom" 
		backgroundColor="#FFFFFF">
		<view class="bagDetail">
			
		</view>
	</uni-popup>
	<!-- 点击购物车图标后底部弹出弹窗显示当前购物车内商品详情，提供结算入口end -->
</view>

Les autres codes sont les mêmes qu'avant
Effet :

problème résolu

Mais si le composant uni-popup est placé dans la boîte qui l'appelle, c'est-à-dire que le composant uni-popup est appelé par son élément parent, il y aura une situation où la fenêtre pop-up ne pourra pas être fermée.