1. 问题描述
在uniapp开发中，我们可能会遇到这样的问题：应用页面底部有一个弹窗层，但是当用户滑动页面的时候，弹窗层跟随滑动，导致页面显示异常。那么，这样的问题该如何解决呢？
2. 解决方案
我们可以通过设置弹窗层的css样式，让它脱离文档流，并且固定在底部，这样就能够使得弹窗层不受页面滑动的影响了。
2.1 css样式设置
首先，我们需要为弹窗层创建一个css类，例如.dialog-wrap，然后在该类中设置以下样式：
.dialog-wrap{
position: fixed;
width: 100%;
bottom: 0;
left: 0;
z-index: 9999;
}
在此，我们将弹窗层的position属性设置为fixed，表示弹窗层脱离文档流，并且相对于屏幕进行定位。同时，我们将bottom属性设置为0，表示弹窗层固定在页面底部，left属性设置为0，表示弹窗层与页面左侧对齐。我们还将width属性设置为100%，使得弹窗层的宽度和页面宽度一致。最后，我们设置了z-index属性，使得弹窗层位于其他元素的上层。
2.2 js代码实现
除了设置css样式，我们还可以通过js代码来解决此问题。具体的做法是，在弹窗层创建之后，监听页面滚动事件，并将弹窗层的位置设置为固定的底部位置。
mounted(){
let dialogHeight = document.getElementById('dialog').offsetHeight;
window.addEventListener('scroll', () => {
let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
let top = scrollTop + document.documentElement.clientHeight - dialogHeight + 'px';
document.getElementById('dialog').style.top = top;
});
},
在此，我们首先获取弹窗层的高度，然后监听页面滚动事件。当页面滚动时，我们计算了弹窗层距离页面顶部的距离top，然后将其设置为弹窗层的top属性值，从而实现了弹窗层的固定底部位置。
3. 总结
通过设置弹窗层的css样式或者监听页面滚动事件来固定弹窗层的底部位置，可以解决在uniapp中弹窗层随底部滑动的问题。具体的做法是根据实际情况选择合适的方法，并设置合适的css样式或者使用对应的js代码实现。