HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

  发布时间:2020-04-10 17:31:30   作者:8个小问题   我要评论
这篇文章主要介绍了HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

H5手指下滑弹出负一屏, 阻止移动端浏览器内置下拉刷新功能,具体实例代码如下所示:

<template>
  <div class="outer-scroll">
    <div class="loading top-box">
        默认隐藏,负一屏,手指下滑即可弹出显示,上滑隐藏
    </div>

    <div class="scroll-box">
        <h1>正式内容</h1>
    </div>
  </div>
</template>
<script>
import $ from 'jquery';
export default {
  name: 'About',
  data() {
      return {

      }
  },
  methods: {
    homescroll() {
      let scroll = document.querySelector('.scroll-box');
      let outer_scroll = document.querySelector('.outer-scroll');
      let topbox = document.querySelector('.top-box');
      let topboxHeight;
      let touchStart;
      let touchDis;
      // 注意如果绑定触摸时的事件则会在下拉时从手指的下拉位置开始下拉 该事件在手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
      scroll.ontouchstart = function (event) {
        touchStart = 0;
        touchDis = 0;
        // 说明:由于手指头是多点触摸到屏幕上的我们所以e.originalEvent.targetTouches的
        // 意思是一个手指触碰点集合我们只需要获取第一个点就可以了所以
        touchStart = event.targetTouches[0].pageY;
        console.log(touchStart);
      };
      // 当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
      scroll.ontouchmove = (event) => {
        // 从顶部向下拖拽
        let touchPos = event.targetTouches[0].pageY;
        touchDis = touchPos - touchStart;
        if (!topboxHeight) {
          topboxHeight = topbox.offsetHeight;
        }
        console.log(topboxHeight);
        if (document.documentElement.scrollTop == 0 && touchDis >= 100) {
          topbox.style.display = 'block';
          $(scroll).stop().animate({ top: topboxHeight }, 'fast');
        } else if (topbox.style.display == 'block' && touchDis < -10) {
          console.log(touchDis);
          $(scroll).stop().animate({ top: '0' }, 'fast');
          setTimeout(() => { topbox.style.display = 'none'; this.$forceUpdate(); }, 100);
          event.preventDefault();
        }
      };
    }
  },
  mounted() {
    document.addEventListener('touchMove', e => {
      e.preventDefault();
    })
    this.homescroll();
  }
}
</script>

<style scoped>

.scroll-box {
  width: 100%;
  position: absolute;
  top: 0;
  background-color: #fff;
}
.loading {
  background: gray;
  width: 100vw;
  height: 40vh;
  display: none;
  overflow: hidden;
  font-size: 40px;
}
.scroll-box {
  background: #ccc;
  height: 60vh;
  color: #fff;
}
</style>

在PC上用鼠标下拉可以弹出负一屏,但是在移动端手指下拉会变为刷新,无法弹出负一屏,解决办法

<!-- 给 body 加样式 overflow:hidden -->
<body style="overflow:hidden">

    <!-- TODO: -->

</body>

实际操作效果如下:

总结

到此这篇关于HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码的文章就介绍到这了,更多相关html5手指下滑弹出内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

相关文章

  • HTML+CSS+JavaScript实现图片3D展览的示例代码

    这篇文章主要介绍了HTML+CSS+JavaScript实现图片3D展览的示例代码。文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着
    2020-10-12
  • HTML5逐步分析实现拖放功能的方法

    这篇文章主要介绍了HTML5逐步分析实现拖放功能的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-30
  • 移动端HTML5 input常见问题(小结)

    这篇文章主要介绍了移动端HTML5 input常见问题(小结),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习
    2020-09-28
  • HTML5超文本标记语言的实现方法

    这篇文章主要介绍了HTML5超文本标记语言的实现方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-09-24
  • Html5 webRTC简单实现视频调用的示例代码

    这篇文章主要介绍了Html5 webRTC简单实现视频调用的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来
    2020-09-23
  • Html5之webcoekt播放JPEG图片流

    这篇文章主要介绍了Html5之webcoekt播放JPEG图片流,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学
    2020-09-22
  • 如何在Canvas上的图形/图像绑定事件监听的实现

    这篇文章主要介绍了如何在Canvas上的图形/图像绑定事件监听的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着
    2020-09-16
  • canvas 绘图时位置偏离的问题解决

    这篇文章主要介绍了canvas 绘图时位置偏离的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2020-09-16
  • 关于canvas.toDataURL 在iOS运行失败的问题解决

    这篇文章主要介绍了关于canvas.toDataURL 在iOS运行失败的问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着
    2020-09-16
  • canvas绘制图片drawImage使用方法

    这篇文章主要介绍了canvas绘制图片drawImage使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学
    2020-09-15

最新评论