取消在微信里面上拉拖动或者下拉拖动看到的空白。(也是什么橡皮筋效果)

场景: 如果页面里面的背景是一个图片(如下图)或者是背景颜色来着,那么上拉或者下拉就看到底层白色的背景可能很烦。 

下面是vue里面用具体代码, 因为我是全页面都是颜色做背景,所以我就直接在App.vue里面写全局了。

methods: {
    cancel_scoll_boune() {
      var startY,endY
      document.querySelector('body').addEventListener("touchstart",function (evt) {
        startY = evt.touches[0].pageY;
      })
      document.querySelector('body').addEventListener("touchmove", function(evt){
        endY = evt.touches[0].pageY; 
        if(endY>startY && document.querySelector('body').scrollTop === 0){
          evt.preventDefault()
        }
        var scrollAll = document.querySelector('body').scrollTop + document.querySelector('body').clientHeight
        var currentHeight = document.querySelector('body').scrollHeight
        if(endY<startY && scrollAll>= currentHeight){
          evt.preventDefault()
        }
      },{ passive: false});
    }
  },
  mounted() {
    this.cancel_scoll_boune()
  }

  

 原理: 利用阻止冒泡事件 evt.preventDefault(),后面还要加{ passive: false} (我发现我每加,达不到效果)。 

知道原理,其他的就好做了,就是判断上滑到顶部或者到最底部就禁止继续滑动就好。 (虽然说效果不是很好,但是足够了。)

可以用到的地方,就是页面不要求上拉或者下拉刷新的页面。

拓展:  如果觉得不好,其实可以利用better-scroll 或者 iscroll插件都可以, 而且还可以做上拉刷新下拉加载。  我一般不想用better-scroll,就是好多弹窗的时候,页面就做的很烦(可能是新手能力不足吧)。

一颗小萌新。 大佬看不下去,记得给我推荐好的教程链接,拜托。

原文地址:https://www.cnblogs.com/dashaxiong/p/12069276.html