[uni-app] solución de excepción emergente del componente uni-popup

1. Recurrencia del problema

Llame al evento de la ventana emergente y al estilo personalizado de la ventana emergente:
Tenga en cuenta que, en este momento, el elemento principal del cuadro que activa la función showBagDetail en la segunda línea de código está al mismo nivel que el componente uni-popup, es decir, un nivel por debajo de 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 -->

Estilos para bloques de elementos personalizados en uni-popup:

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

La función que llama al método emergente de la ventana emergente:

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

Efecto:

puede ver que solo aparece un pequeño borde blanco, y este pequeño borde blanco sigue siendo el espacio entre el componente uni-popup y la parte inferior

Dos, la solución

Haga que el cuadro que activa la función showBagDetail haga clic en la segunda línea de código al mismo nivel que el componente uni-popup
Eso es todo:

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

Otros códigos son los mismos que antes
Efecto:

problema resuelto

Pero si el componente uni-popup se coloca en el cuadro que lo llama, es decir, el componente uni-popup es llamado por su elemento principal, habrá una situación en la que la ventana emergente no se podrá cerrar.