유니앱 팝업창 레이어가 하단과 함께 미끄러지지 않는 문제 해결 방법

유니앱에서는 확인 팝업, 공유 팝업 등 팝업창을 자주 사용합니다. 팝업창 레이어가 나타날 때, 팝업창을 강조하기 위해 배경 레이어를 회색 및 반투명으로 설정해야 하는 경우가 많습니다. 다만, 하단바나 하단탭바가 나타나는 경우 하단 슬라이드시 팝업창 레이어도 함께 슬라이드하게 되어 디자인상의 문제가 발생할 수 있습니다. 이번 글에서는 팝업 레이어가 바닥과 함께 미끄러지는 것을 방지하는 솔루션을 소개하겠습니다.

문제 설명

하단 추가바, 팝업 레이어, 하단 탭바의 레벨이 다릅니다.

추가 버튼을 클릭하여 팝업창 레이어를 팝업할 때 팝업창 레이어가 하단 추가 바를 덮을 수 있지만 하단과 함께 미끄러지지 않고 페이지에 고정된 상태로 유지되기를 바랍니다.

해결 방법

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단계: 팝업창 레이어 높이 재설정

1단계에서 빈 레이어를 추가했기 때문에 팝업창 레이어의 높이를 재설정해야 합니다. 팝업 창 레이어의 높이를 뷰포트 높이에서 하단에 추가된 막대와 하단 탭 막대의 높이를 뺀 값으로 설정해야 합니다(빈 레이어의 높이가 설정되어 있기 때문입니다). -업 창 레이어는 페이지와 높이가 같을 수 있습니다:

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

이렇게 하면 팝업 창 레이어가 바닥과 미끄러지지 않는 설정이 완료되었습니다.

요약

유니앱에서는 팝업창 레이어를 고정 위치로 설정하고 레벨을 가장 높은 수준으로 설정할 수 있습니다. 이렇게 하면 팝업창 레이어가 하단과 함께 미끄러지지 않고 정상적으로 표시될 수 있습니다. . 또한 팝업창 레이어의 높이 문제를 해결하기 위해 빈 레이어를 추가하고 팝업창 레이어의 높이를 재설정하여 팝업창 레이어가 동일할 수 있도록 했습니다. 높이가 페이지와 같으며 바닥과 함께 미끄러지지 않습니다.

위 내용은 유니앱 팝업창 레이어가 하단과 함께 미끄러지지 않는 문제 해결 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!