Vue下监听页面滚动以及移动端触摸事件

发表于 分类于 Waline：

无聊刷知乎的时候发现了一个前端设计的宝藏网站awwwards，对上面大佬实现的网站表示望洋兴叹，
但同时自己也跃跃欲试，我也想整一个，万一整出来了呢。

在上面看到了Rally大佬写的GlobeKit,感觉是通过监听滚动事件来进行一个样式的切换，便去了解了一下如何监听页面的滚动事件。

pc端鼠标滚动监听

监听

根据不同的浏览器，在mounted中给页面添加一个滚动监听事件，其中的scrollFun是监听到滚动时候执行的方法

1
2
3
4
5
6
7
// 浏览器兼容      
 if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
     document.addEventListener("DOMMouseScroll", this.scrollFun, false)
   } else if (document.addEventListener) {
     document.addEventListener("mousewheel", this.scrollFun, false)
   } 
 }

获取滚动事件的信息

通过传递的event对象获取滚动的属性

1
2
3
4
5
6
7
8
9
10
11
12
13
 //滚动翻页
scrollFun(event: any) {
  // mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
  // DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
  const delta = event.detail || (-event.wheelDelta);
     if (delta > 0 ) {
       // 向下滚动
       console.log("向下滚动")
     }else if (delta < 0) {
         //向上滚动
         console.log("向上滚动")
     }
 }

移动端的touch事件

移动端的上下滚动并不能用上面的方法监听，是因为手机没鼠标吧。
为了实现我想要的效果，我都是直接把滚动条隐藏，然后监听touch事件来自行判断用户是否进行一个上滑下滑的操作。

  • touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。
  • touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。
  • touchend事件：当手指从屏幕上离开的时候触发。

事件添加

双引号里是调用的方法

1
<div id="main" @touchstart="touchstart($event)" @touchend="touchend($event)">

信息的获取

通过传递的$event对象获取触摸事件的信息
例：

1
2
3
4
5
6
7
touchstart(e: any): void{
    this.startY = e.touches[0].pageY //获取触摸点的Y轴坐标
}
touchend(e: any): void{
    const moveEndY = e.changedTouches[0].pageY //获取松开手时Y轴的坐标
    ......
}

这样通过两个坐标的相减，我们通过正负即可判断用户的上下滑动。

传递过来的对象包括了三个用于跟踪触摸的属性：

  • touches：表示当前跟踪的触摸操作的touch对象的数组。
  • targetTouches：特定于事件目标的Touch对象的数组。
  • changeTouches：表示自上次触摸以来发生了什么改变的Touch对象的数组。