小程序中fixed定位弹框页面穿透问题

最新推荐文章于 2024-01-19 16:39:20 发布

编程迪

最新推荐文章于 2024-01-19 16:39:20 发布

阅读量1.9k

点赞数

文章标签：小程序前端微信小程序

本文链接：https://blog.csdn.net/zd1007129657/article/details/118905935

版权

博客探讨了在支付宝小程序中实现自定义popup弹框并处理页面滚动的问题。当页面内容超过视口高度时，弹框出现会导致页面穿透。解决方案包括使用小程序的disableScroll指令，但会禁用弹框内的滚动；尝试通过页面绝对定位防止滚动，但无法实现指定位置滚动。最终，通过调整页面和弹框样式实现了弹框出现后页面滚动到指定位置的效果。

摘要由CSDN通过智能技术生成

需求描述：新开发支付宝小程序，自定义popup弹框，弹框中有滚动区域，弹框出现后页面需要滚动到指定位置。

问题分析：popup弹框在上，铺满整个屏幕，没有问题；页面高度大于可视区域（超出100vh）;引发的问题，弹框出现后，页面还能上下滚动（在真机上，页面穿透了），小程序机制的问题（以整个page为单位）。

解决思路：当弹框出现后，采用小程序自带指令 disableScroll 禁用页面滚动，没有问题，但是导致弹框里现有的滚动也不行了（实际需求是弹框里也有滚动的场景，禁用后整个页面任何元素都不能滚动了）。

解决思路二：当弹框出现后，采用给整个页面绝对定位的方式，使其不能滚动，也就不会存在穿透的问题。这种方式没有问题，但我们的实际场景是当弹框出现后，需要页面想上滚动一段距离，而这种绝对定位的方式导致页面回到了顶部。

.noscroll{
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 0;
}

解决思路三：在给整个页面绝对定位的同时，让其也向上滚动一段距离（滚动我们需要的位置）。

.noscroll{
  top: -26vh;
  left: 0px;
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: fixed;
  z-index: 0;
}

页面高度大于可视区域，筛选弹框跟随筛选栏的位置移动。

<view class="top"></view>
<view class="tabs2">
  <view class="tabs2-item" a:for="{{3}}" onTap="clickTab2"></view>
  <view class="popup-mask" a:if="{{isPopup}}" catchTap="clickPopupMask"></view>
  <view class="popup" a:if="{{isPopup}}">
    <view class="popup-content"></view>
</view>
<view class="list"></view>

.top{
  height:50vh;
}
.list{
  height: 70vh;
}
.tabs2{
  height: 70rpx;
  position: relative;
}
.popup-mask{
  position: absolute;
  top: 70rpx;
  left: 0;
  right: 0;
  z-index: 2;
  height: 70vh;
  background-color: rgba(0,0,0,.75);
}
.popup{
  position: absolute;
  top:70rpx;
  left: 0;
  right: 0;
  z-index: 3;
  overflow: hidden;
}
.popup-content{
  height: 30vh;
  overflow-y: auto;
}

// 点击tab
clickTab2(){
  this.setData({
    isPopup: !this.data.isPopup,
  });
},
// 关闭遮罩
clickPopupMask(){
  this.setData({
    isPopup: false,
  });
},