3、js 移动端网页特效：touch触摸事件 ,回到顶部

一、touch

1.1 touch触摸事件

事件	说明
touchstart	手指触摸到一个DOM元素触发。当一个或多个触摸点与触控设备表面接触时触发touchstart 事件
touchmove	手指在一个DOM元素上滑动时触发
touchend	手指从一个DOM元素移开时触发

div.addEventListener('touchstart',function(e){
console.log(e);
})

1.2 touchEvent触摸事件对象

触摸列表	说明	备注
touches	正在触摸屏幕的所有手指列表	如果侦听的是同一个DOM元素，和targetTouches是一样的
targetTouches	正在触摸当前DOM元素上的手指的一个列表
changedTouches	手指状态发生了改变的列表，从无到有，从有到无的变化	一般用的这个多一点

1.2.1 例子 盒子拖动

    // 1.触摸元素 touchstart: 获取手指初始位置,同时获得盒子原来的位置
    // 2.移动手指 touchmove: 计算手指的滑动距离,并且移动盒子
    // 3.离开手指 touchend
    // 注意 手指移动 会 触发滚动屏幕 所以需要阻止默认的屏幕滚动 e.preventDefault()
    let x, y, xStart, yStart = 0;
    let box = document.querySelector("#box");
    box.addEventListener("touchstart", function (e) {
      // console.log("touchstart", e);
      // 手指的开始位置
      xStart = e.targetTouches[0].pageX;
      yStart = e.targetTouches[0].pageY;
      // 盒子的初始位置
      x = this.offsetLeft;
      y = this.offsetTop;
    });


    box.addEventListener("touchmove", function (e) {
      // console.log("touchmove", e);
      // 计算手指的移动距离:手指移动之后的坐标减去手指初始的坐标
      let moveX = e.targetTouches[0].pageX - xStart;
      let moveY = e.targetTouches[0].pageY - yStart;
      this.style.left = x + moveX + "px";
      this.style.top = y + moveY + "px";
    })

    // box.addEventListener("touchend", function (e) {
    //   console.log("touchend", e);
    // })

二、回到顶部

2.1例子

  <div class="container">
    <div id="item1" class="header item"></div>
    <div id="item2" class="content item"></div>
    <div id="item3" class="footer item"></div>
    <div id="item4" class="header item"></div>
    <div id="item5" class="content item"></div>
    <div id="item6" class="footer item"></div>
    <div class="goBack">
      <van-icon name="back-top" size="3rem" class="icon" />
    </div>
  </div>

    let goBack = document.querySelector(".goBack");
    let container = document.querySelector(".container");
    let item3 = document.querySelector("#item3");

    container.addEventListener("scroll", function () {
      let scrollTop = container.scrollTop;
      let offsetTop = item3.offsetTop;
      // console.log("scrollTop", scrollTop);
      // // 现在这个有点情况 发现高度包括了 header的高度 注意有个offsetParent 是相对于这个的
      // console.log("offsetparent", item3.offsetParent);
      // // 这个就会发现问题 需要给相对的盒子 加上position
      // console.log("offsetTop", offsetTop);
      if (scrollTop >= offsetTop) {
        goBack.style.display = "block";
      } else {
        goBack.style.display = "none";
      }
    })
    goBack.addEventListener("click", function () {
      container.scroll(0, 0)
    })

三、使用插件

3.1 swiper 的组件使用

走马灯的效果

swiper 的官网文档

3.2 zy.media.js插件

轻量级的媒体播放器

zy.media 的官方网址

四、注意

4.1 click延时解决方案

移动端click事件会有300ms的延时，原因是移动端屏幕双击会缩放页面

• 解决方法：
  1.禁止缩放。浏览器禁用默认的双击缩放行为并且去掉300ms的点击延迟(如下代码)

<meta name="viewport" content="user-scalable=no"