h5移动端弹层出现禁止弹层下方页面滑动方式

摘要

实现功能，弹层出现已经可以满足需求了，但是给予用户的交互体验不好，弹层出现，为什么弹层下边是可以滑动，上边可以动下边也可以动，用户的注意点在哪儿，潜在影响用户使用。

解决方案

本文例子以vue方式为例

<div v-show="createReportLayer" class="fb-box zol-box spe-layer">
  <div class="loader">
    <div class="line-scale">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p>我知道了</p>
    <p>请耐心等候{{ dotTxt }}</p>
  </div>
</div>

方式一

给弹层外层加上@touchmove.prevent，阻止默认事件，这样的前提是弹层内不存在可以上下或者左右滑动的元素。

<div v-show="createReportLayer" class="fb-box zol-box spe-layer" @touchmove.prevent>
  <div class="loader">
    <div class="line-scale">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
    <p>我知道了</p>
    <p>请耐心等候{{ dotTxt }}</p>
  </div>
</div>

方式二

给弹层外层加上@touchmove.prevent，阻止默认事件，弹层内存在可以上下或者左右滑动的元素
给里面需要滑动的元素加上better-scroll，具体better-scroll使用方式，请点击该处，可以实现局部滚动。

方式三

监听createReportLayer字段的值变化，如果弹层出现，就给body设置样式overflow: hidden;反之，删除overflow的样式，这样做的结果是，弹层上边可以自动的滑动，而弹层下方是不能滑动的。

<template>
  <div>
    <div v-show="createReportLayer" class="fb-box zol-box spe-layer">
      <div class="loader">
        <div class="line-scale">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
        <p>我知道了</p>
        <p>请耐心等候{{ dotTxt }}</p>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      createReportLayer: false
    }
  },
  watch: {
    createReportLayer() {
      if(this.createReportLayer) {
        document.body.style.cssText = `overflow: hidden;`
      }else {
        document.body.style.cssText = ``;
      }
    }
  }
};
</script>

<style lang="scss" scoped></style>