vue解决ios橡皮筋回弹！ 禁止ios滑动回弹效果和安卓炫光效果

第一种方法：

通过监听 touchmove 事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

// 禁止页面滚动
    var forbidScroll = function (e) {
      e.preventDefault();
    };
    // 通过 $once 来监听生命周期 beforeDestroy 钩子
    this.$once("hook:beforeDestroy", () => {
      body.removeEventListener("touchmove", forbidScroll);
    });
    //函数调用
    function forbidTouchMove() {
      document.body.style.overflow = "hidden";
      body.addEventListener("touchmove", forbidScroll, { passive: false });
    }
    forbidTouchMove();
           

方法二：

可以使用css新属性overscroll-behavior

body {

overscroll-behavior-y: none;

}

但是需要浏览器支持该属性

方法三：

可以使用插件inobounce（但是只适用于ios系统，安卓不适用）

官网：https://github.com/lazd/iNoBounce

在vue中：

//先下载npm install inobounce -s

//然后在script中：

<script>
import inobounce from 'inobounce'
export default {
  data() {
    return {  }
  },
  mounted() { },
  created() {
    let u = navigator.userAgent
    if (u.indexOf('iPhone') > -1) {
      inobounce.enable()
    }
  },
  beforeDestroy() {
    inobounce.disable()
  },
  methods: { }
}
</script>