滚动穿透不再难！移动端Vue指令轻松解决！

前端

2023-10-17 00:23:35

在移动端网页开发中，经常会用到弹窗选择的操作。但当用户在滚动页面底部或顶部时，点击弹窗内的按钮，却出现了令人抓狂的"滚动穿透"问题。

在本文中，我们将介绍如何使用Vue指令巧妙解决移动端弹窗的"滚动穿透"问题，让你的移动端应用更上一层楼！

理解"滚动穿透"问题

在移动端网页中，"滚动穿透"问题是指当用户滚动页面底部或顶部时，再继续上下滑动，滚动动作会穿透弹窗并作用于页面本身。这会导致弹窗无法正常使用，严重影响用户体验。

Vue指令的妙用

要解决"滚动穿透"问题，我们可以巧妙地利用Vue指令。Vue指令是一种强大的工具，可以用来扩展Vue组件的 functionality。

在这里，我们可以创建一个自定义指令，在用户触发touchmove事件时阻止页面滚动。具体步骤如下：

Vue.directive('prevent-scroll', {
  bind: function (el) {
    el.addEventListener('touchmove', function (e) {
      e.preventDefault();
    });
  }
});

使用自定义指令

创建好自定义指令后，我们就可以在需要防止滚动穿透的弹窗元素上使用它。

<div v-prevent-scroll>
  <!-- 弹窗内容 -->
</div>

当用户在弹窗区域触发touchmove事件时，自定义指令就会被触发，阻止页面的滚动。这样，"滚动穿透"问题就迎刃而解了！

实例演示

<template>
  <div>
    <button @click="openDialog">打开弹窗</button>
    <my-dialog v-if="dialogVisible" @close="dialogVisible = false">
      <p>弹窗内容...</p>
      <button @click="closeDialog">关闭</button>
    </my-dialog>
  </div>
</template>

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

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

    return {
      dialogVisible,
      openDialog() {
        dialogVisible.value = true;
      },
      closeDialog() {
        dialogVisible.value = false;
      }
    };
  }
};
</script>