在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中弹窗层不随底部滑动怎么解决的详细内容，更多请关注编程网其它相关文章！
