uView组件拯救了我的uniapp滚动穿透问题

2023-09-08 16:26:58

解决 Uniapp H5 滚动穿透和滑动穿透难题

一、何谓滚动穿透和滑动穿透？

当我们浏览网页时，有时会遇到这样的情况：当页面向上滚动时，遮罩层、弹窗或蒙层却纹丝不动，仿佛漂浮在页面上方，让我们可以看到下方原本隐藏的内容。这就是滚动穿透。类似地，当我们水平滑动页面时，这些元素依然不动如山，这就是滑动穿透。它们破坏了用户体验，令页面布局混乱不堪。

二、解决滚动穿透和滑动穿透

要解决滚动穿透和滑动穿透，有以下几种方法：

定位固定 (position: fixed)： 将遮罩层、弹窗或蒙层的定位设为固定，使其始终停留在同一位置，无论页面如何滚动或滑动。

#mask {
  position: fixed;
}

隐藏内容 (overflow: hidden)： 将这些元素的父元素的溢出属性设为隐藏，从而隐藏父元素中超出部分的内容。

#parent {
  overflow: hidden;
}

使用 uView 组件： uView 是一个功能强大的 Uniapp 组件库，其中包含了开箱即用的遮罩层、弹窗和蒙层组件，它们内置了滚动穿透和滑动穿透的解决方案。

<template>
  <u-mask :show="maskShow" />
</template>

<script>
import { ref } from 'vue';
import { uMask } from 'uview-ui';

export default {
  components: { uMask },
  setup() {
    const maskShow = ref(false);

    return {
      maskShow
    }
  }
};
</script>

三、uView 组件的使用

安装 uView 组件库：

npm install uview-ui --save

在页面中使用 uView 组件：

<template>
  <div>
    <u-mask :show="maskShow" />
    <!-- 其他内容 -->
  </div>
</template>

<script>
import { ref } from 'vue';
import { uMask } from 'uview-ui';

export default {
  components: { uMask },
  setup() {
    const maskShow = ref(false);

    return {
      maskShow
    }
  }
};
</script>

四、总结

通过使用这些方法，我们可以有效解决 Uniapp H5 中的滚动穿透和滑动穿透问题，从而创建更流畅、美观的页面布局。

常见问题解答

如何使用 CSS 定位固定来解决滚动穿透？

#mask {
  position: fixed;
}

如何使用 CSS 隐藏内容来解决滚动穿透？

#parent {
  overflow: hidden;
}

如何使用 uView 组件解决滚动穿透？

<template>
  <u-mask :show="maskShow" />
</template>

<script>
import { ref } from 'vue';
import { uMask } from 'uview-ui';

export default {
  components: { uMask },
  setup() {
    const maskShow = ref(false);

    return {
      maskShow
    }
  }
};
</script>