手机端uni-app实现弹出框组件禁止滚动穿透的2大方案

前端

2022-12-03 18:38:22

uni-app弹出框与fixed组件滚动穿透问题剖析与解决方案

什么是滚动穿透？

滚动穿透是指当组件内的内容滚动到底部时，继续滑动会导致底层页面的滚动，这种现象会严重影响用户体验。在uni-app开发中，弹出框和fixed组件经常会出现滚动穿透的问题。

uni-app弹出框组件的滚动穿透问题

uni-app的弹出框组件是一种内置组件，主要用于显示模态窗口。如果弹出框组件内的内容可以滚动，当内容滚动到底部时，继续滑动会导致底层页面的滚动。这是因为弹出框组件默认使用绝对定位，不会阻止底层页面的滚动。

解决方案：

使用popup组件

popup组件是uni-app提供的另一种弹出框组件，它使用固定定位，可以有效防止滚动穿透。

<template>
  <van-popup v-model="showPopup">
    <div class="popup-content">
      <!-- Popup content -->
    </div>
  </van-popup>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showPopup = ref(false);

    return {
      showPopup,
    };
  },
};
</script>

<style>
.popup-content {
  max-height: 300px;
  overflow: auto;
}
</style>

使用fixed组件

fixed组件是一种内置组件，可以实现固定定位。将弹出框组件放置在fixed组件内，可以阻止滚动穿透。

<template>
  <div>
    <div class="fixed-content">
      <van-popup v-model="showPopup">
        <div class="popup-content">
          <!-- Popup content -->
        </div>
      </van-popup>
    </div>
  </div>
</template>

<style>
.fixed-content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
</style>

uni-app fixed组件的滚动穿透问题

uni-app的fixed组件使用固定定位，可以将组件固定在页面上。然而，如果fixed组件内的内容可以滚动，当内容滚动到底部时，继续滑动仍然会导致底层页面的滚动。这是因为fixed组件默认不阻止底层页面的滚动事件。

解决方案：

使用touchmove事件

touchmove事件是在手指在触摸屏上移动时触发的事件。通过阻止touchmove事件，可以有效防止fixed组件的滚动穿透。

<template>
  <div>
    <div class="fixed-content" @touchmove="handleTouchMove">
      <!-- Fixed content -->
    </div>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const showPopup = ref(false);

    const handleTouchMove = (e) => {
      e.preventDefault();
    };

    return {
      showPopup,
      handleTouchMove,
    };
  },
};
</script>

<style>
.fixed-content {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}
</style>