vue中H5页面禁止下拉露底

在vue开发中，有这样一个需求，禁止页面的下拉露底。网络上大都是禁止了所有页面的下拉露底，并不太符合要求，经过一番实践，特此记录一下解决办法。

1. 首先注册一个全局组件 Scroll

1-1:在components文件夹中新建一个Scroll.vue文件，代码如下：
  <template>
  <div ref="scroll" class="w-scroll">
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "scroll",
  data() {
    return {};
  },
  computed: {},
  mounted() {
    this.wScroll(this.$refs.scroll);
  },
  methods: {
    wScroll(elem) {
      var startX = 0,
        startY = 0;
      document.addEventListener("touchstart", function(evt) {
        var touch = evt.touches[0];
        startX = Number(touch.pageX);
        startY = Number(touch.pageY);
      });

      elem.addEventListener("touchmove", function(ev) {
        var _point = ev.touches[0],
          _top = elem.scrollTop;
        var _bottomFaVal = elem.scrollHeight - elem.offsetHeight;
        //console.log(_top + ":" + _bottomFaVal + ":" + elem.offsetHeight + ":" + elem.scrollHeight);
        if (_top === 0) {
          if (_point.clientY > startY) {
            if (!ev.cancelable) {
              ev.stopPropagation();
            }
          } else {
            ev.stopPropagation();
          }
        } else if (_top === _bottomFaVal) {
          ev.stopPropagation();
        } else if (_top > 0 && _top < _bottomFaVal) {
          ev.stopPropagation();
        } else {
          ev.preventDefault();
        }
      });
    }
  }
};
</script>
<style scoped="scoped">
.w-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
</style>

 1-2:在assets文件夹中，或者在其他文件夹中都可以，新建一个Scroll.js

  代码如下：
  <script> //复制的时候删掉script
  import ScrollComponent from "../../components/Scroll/Scroll.vue";
    const Scroll = {
      install:function(Vue){
          Vue.component('Scroll',ScrollComponent)
      }
  }
  export default Scroll
  </script>
1-3:在main.js中全局引入
  <script>//复制的时候删掉script
    //全局组件滚动区域
    import Scroll from "./assets/js/Scroll";
    Vue.use(Scroll)
  </script>

2.在需要禁止下拉露底的页面中，最外层的标签上加上这一句 @touchmove.prevent

2-1:使用方法代码示例：

<template>
    <div class="box" @touchmove.prevent>
      <Scroll>
        <div class="details">
          内容
        </box>
      </Scroll>
    </box>
</template>

至此，完成，在浏览器中下拉不会再出现“网页由XXX提供”的露底的现象了。