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


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

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

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

  • 相关阅读:
    [LeetCode]1290. 二进制链表转整数
    [LeetCode]1295. 统计位数为偶数的数字
    map 用法 拿到map数组每一个数据
    父子组件相互传参
    父组件给子组件传参 el-dialog 试例
    如何用JS判断div中内容为空,当为空时隐藏div
    完整的Vue+element-ui table组件实现表格内容的编辑删除和新行添加小实例
    Git操作
    charles的使用
    移动端的一些问题
  • 原文地址:https://www.cnblogs.com/dashaxiong/p/12069276.html
Copyright © 2020-2023  润新知