Comment résoudre le problème selon lequel le calque de la fenêtre contextuelle dans Uniapp ne glisse pas avec le bas

Dans Uniapp, nous utilisons souvent des fenêtres pop-up, telles que des pop-ups de confirmation, des pop-ups de partage, etc. Lorsque le calque de la fenêtre contextuelle apparaît, il est souvent nécessaire de définir le calque d'arrière-plan sur gris et translucide pour mettre en évidence la fenêtre contextuelle. Cependant, si une barre inférieure ou une barre d'onglets inférieure apparaît, lorsque le bas glisse, le calque de la fenêtre contextuelle glissera également avec lui, ce qui entraînera des problèmes de conception. Dans cet article, nous présenterons une solution pour empêcher le calque contextuel de glisser avec le bas.

Description du problème

Notre barre inférieure ajoutée, notre calque contextuel et notre barre d'onglets inférieure sont à différents niveaux.

Lorsque nous cliquons sur le bouton Ajouter pour faire apparaître le calque de la fenêtre contextuelle, nous espérons que le calque de la fenêtre contextuelle pourra recouvrir la barre d'ajout inférieure, mais ne glissera pas avec le bas et restera fixe sur la page.

Solution

Étape 1 : Ajouter un calque vierge

Ajoutez un calque vierge entre la barre d'ajout inférieure et la barre d'onglets inférieure, comme indiqué ci-dessous :

<view class="add-bar"></view>
<view class="blank-area"></view>
<view class="tab-bar"></view>

Ensuite, dans le fichier CSS correspondant, définissez le calque vierge. La hauteur du calque afin qu'il occupe la position inférieure :

.add-bar{
  width:100%;
  height:50px;
  background-color:#ccc;
}
.blank-area{
  width:100%;
  height:calc(100vh - 50px - 100rpx);
  background-color:#fff;
}
.tab-bar{
  width:100%;
  height:100rpx;
  background-color:#ccc;
}

Étape 2 : définissez le calque contextuel sur un positionnement fixe

Ensuite, nous devons définir le calque contextuel sur un positionnement fixe, et définir la largeur et la hauteur sur 100 %. Ensuite, afin de garantir que le calque pop-up puisse être affiché normalement, nous devons définir son niveau au niveau le plus élevé :

<view class="popup" v-show="showPopup">
  <!--弹窗内容-->
</view>

.popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:9999;
}

Après avoir défini cela, le calque pop-up peut être présenté sur la page et ne glissera pas. avec le bas.

Étape 3 : Réinitialiser la hauteur du calque de la fenêtre contextuelle

Depuis que nous avons ajouté un calque vierge dans la première étape, la hauteur du calque de la fenêtre contextuelle doit être réinitialisée. Nous devons définir la hauteur du calque de la fenêtre contextuelle à la hauteur de la fenêtre moins la hauteur de la barre inférieure ajoutée et de la barre d'onglets inférieure (car la hauteur du calque vide est définie), afin de garantir que le pop-up -le calque de la fenêtre pop-up peut avoir la même hauteur que la page :

.popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:calc(100vh - 50px - 100rpx);
  z-index:9999;
}

De cette façon, nous avons terminé le réglage du calque de la fenêtre pop-up qui ne glisse pas avec le bas.

Résumé

Dans Uniapp, le calque de la fenêtre contextuelle peut être défini sur un positionnement fixe et définir son niveau au niveau le plus élevé. Cela peut garantir que le calque de la fenêtre contextuelle peut être affiché normalement et ne glissera pas avec le bas. . De plus, afin de résoudre le problème de la hauteur du calque de la fenêtre contextuelle, nous avons ajouté un calque vierge et réinitialisé la hauteur du calque de la fenêtre contextuelle. Cela garantit que le calque de la fenêtre contextuelle peut être le même. hauteur que la page et ne glissera pas avec le bas.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!