uniapp在h5端popup会穿透下层页面进行滚动的解决方案

最新推荐文章于 2025-07-22 15:00:18 发布

原创最新推荐文章于 2025-07-22 15:00:18 发布 · 753 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

这篇文章介绍了如何通过JavaScript中的isMaskShow方法控制页面滚动，当某个条件满足时，隐藏页面滚动并修复穿透问题，特别提到了在微信小程序(MP-WEIXIN)环境下的组件Rect计算

  watch: {
	//加个这个控制就好了
    isMaskShow(newValue, oldValue) {
      //在这里添加一句样式    ㄟ(≧◇≦)ㄏ
      document.body.style.overflow = !newValue ? "auto" : "hidden";
      // 是的就是这句话就能解决穿透的问题
      if (newValue === true) {
        // #ifdef MP-WEIXIN
        const children = this.$children;
        this.retryComputedComponentRect(children);
        // #endif
      }
    }
  },