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

Posted dashaxiong

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了取消在微信里面上拉拖动或者下拉拖动看到的空白。(也是什么橡皮筋效果)相关的知识,希望对你有一定的参考价值。

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

技术图片

下面是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,就是好多弹窗的时候,页面就做的很烦(可能是新手能力不足吧)。

 

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

以上是关于取消在微信里面上拉拖动或者下拉拖动看到的空白。(也是什么橡皮筋效果)的主要内容,如果未能解决你的问题,请参考以下文章

苹果13微信下拉白色流动液体

微信里的链接,提示要分享到朋友圈或者转发才能看到内容是怎么设置的?

如何在微信里直接打开app?

怎么在微信里添加“小程序”功能教程

微信链接打开后空白怎么办

为啥在微信里打不开青年大学习了?