uniapp中弹窗层不随底部滑动怎么解决-uni-app-PHP中文网

uniapp中弹窗层不随底部滑动怎么解决

PHPz

发布： 2023-04-14 19:39:01

原创

2557人浏览过

在uniapp中，我们经常会使用到弹窗层，比如确认弹窗、分享弹窗等等。在弹窗层出现的时候，往往需要将背景层设置为灰色半透明，以突出弹窗。但是，如果出现底部添加栏或底部tab栏的时候，底部滑动时，弹窗层也会跟着滑动，这样就会引发一些设计上的困扰。在本文中，我们将会介绍一种解决方法，使得弹窗层能够不随底部滑动。

问题描述

我们的底部添加栏、弹窗层和底部tab栏分别处于不同的层级。

当我们点击添加按钮，弹出弹窗层时，我们希望弹窗层能够覆盖在底部添加栏之上，但不随底部滑动，保持固定在页面上。

解决方案

第一步：新增一个空白层

在底部添加栏和底部tab栏中间添加一个空白层，如下所示：

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

登录后复制

第二步：弹窗层设置为fixed定位

接下来，我们需要将弹窗层设置为fixed定位，并且宽度和高度都要设为100%。然后，为了保证弹窗层能够正常显示，我们需要将其层级设置为最高：

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

登录后复制

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

登录后复制

这样设置后，弹窗层就能够在页面上呈现，并且不会随着底部滑动了。

第三步：重置弹窗层高度

由于我们在第一步中增加了一个空白层，所以弹窗层的高度就需要重新设定了。我们要将弹窗层的高度设为视口高度减去底部添加栏和底部tab栏的高度（因为空白层的高度设置了），就可以保证弹窗层能够和页面高度相同：

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

登录后复制

这样，我们就完成了弹窗层不随底部滑动的设置。

总结

在Uniapp中，弹窗层的设置可以采用fixed定位，并将其层级设置为最高，这样可以保证弹窗层能够正常显示，并且不会随着底部滑动。另外，为了解决弹窗层高度的问题，我们新增一个空白层，重新设置了弹窗层高度，这样就能够保证弹窗层能够和页面高度相同，并且不会随着底部滑动了。

以上就是uniapp中弹窗层不随底部滑动怎么解决的详细内容，更多请关注php中文网其它相关文章！