uniappのポップアップウィンドウレイヤーが下にスライドしない問題の解決方法

Uniapp では、確認ポップアップ ウィンドウ、共有ポップアップ ウィンドウなど、ポップアップ ウィンドウ レイヤーをよく使用します。ポップアップ ウィンドウ レイヤが表示されるときは、ポップアップ ウィンドウを強調表示するために背景レイヤを灰色で半透明に設定することが必要になる場合があります。ただし、ボトムバーやボトムタブバーが表示されている場合、ボトムをスライドさせるとポップアップウィンドウのレイヤーも一緒にスライドするため、デザイン上の問題が発生します。この記事では、ポップアップレイヤーが底と滑らないようにする解決策を紹介します。

問題の説明

下部に追加されたバー、ポップアップ ウィンドウ レイヤー、および下部タブ バーは異なるレベルにあります。

追加ボタンをクリックしてポップアップ ウィンドウ レイヤーをポップアップするとき、ポップアップ ウィンドウ レイヤーが下部の追加バーを覆うことができますが、下部と一緒にスライドせず、ページ上に固定されたままであることを望みます。 。

解決策

ステップ 1: 空のレイヤーを追加する

以下に示すように、下部の追加バーと下部のタブ バーの間に空のレイヤーを追加します。

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

次に、対応する CSS ファイルで、空のレイヤーが一番下の位置を占めるように高さを設定します。

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

ステップ 2: ポップアップ レイヤーを固定位置に設定します

#次に、ポップアップ ウィンドウ レイヤーを固定位置に設定し、幅と高さを 100% に設定する必要があります。次に、ポップアップ レイヤーを正常に表示できるようにするには、そのレベルを最高に設定する必要があります。

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

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

これを設定すると、ポップアップ レイヤーがページ上に表示され、底と滑りません。

ステップ 3: ポップアップ ウィンドウ レイヤーの高さをリセットする

最初のステップで空のレイヤーを追加したため、ポップアップ ウィンドウ レイヤーの高さをリセットする必要があります。ポップが確実に表示されるように、ポップアップ ウィンドウ レイヤーの高さを、ビューポートの高さから下部に追加されたバーと下部タブ バーの高さを引いた値に設定する必要があります (空のレイヤーの高さが設定されているため)。 -up window レイヤーはページと同じ高さにすることができます:

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

これで、ポップアップウィンドウレイヤーが下にスライドしない設定が完了しました。

概要

Uniapp では、ポップアップ ウィンドウ レイヤーを固定位置に設定し、そのレベルを最高レベルに設定できます。これにより、ポップアップ ウィンドウ レイヤーを確実に配置できます。通常どおり表示され、下のスライドには従いません。また、ポップアップ ウィンドウ レイヤーの高さの問題を解決するために、空白のレイヤーを追加し、ポップアップ ウィンドウ レイヤーの高さを再設定し、ポップアップ ウィンドウ レイヤーを同じ高さにできるようにしました。ページと同じ高さで、底部と一緒にスライドしません。

以上がuniappのポップアップウィンドウレイヤーが下にスライドしない問題の解決方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。