原生JS【移动端全屏滑动】功能实现

1. touchstart事件：当手指触摸屏幕时候触发，即使已经有一个手指放在屏幕上也会触发。

2. touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间，调用preventDefault()事件可以阻止滚动。

3. touchend事件：当手指从屏幕上离开的时候触发。

首先设置rem自适应布局

// 1rem = 10px
    document.documentElement.style.fontSize =
    document.documentElement.clientWidth / 37.5 + "px";

html代码

	<div id="app">
	  <divclass="wrap">
	    <div class="wrap-slider">
	      <div class="slider-item">page-1</div>
	      <div class="slider-item">page-2</div>
	      <div class="slider-item">page-3</div>
	      <div class="slider-item">page-4</div>
	      <div class="slider-item">page-5</div>
	    </div>
	  </div>
	</div>

css代码

	body {
    
    
      margin: 0;
    }
    html,
    body,
    #app {
    
    
      height: 100%;
    }
    .wrap {
    
    
      position: relative;
      height: 100%;
      overflow: hidden;
    }
    .wrap-slider {
    
    
      display: flex;
      position: absolute;
      flex-direction: row;
      width: 187.5rem;
      height: 100%;
    }
    .slider-item {
    
    
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 5rem;
      flex: 1;
    }
    .slider-item:nth-child(1) {
    
    
      background-color: aqua;
    }
    .slider-item:nth-child(2) {
    
    
      background-color: red;
    }
    .slider-item:nth-child(3) {
    
    
      background-color: yellow;
    }
    .slider-item:nth-child(4) {
    
    
      background-color: blue;
    }
    .slider-item:nth-child(5) {
    
    
      background-color: rgb(132, 126, 126);
    }

js代码

	  const wrap = document.querySelector(".wrap");
      const wrapSlider = document.querySelector(".wrap-slider");
      const sliderItem = document.querySelectorAll(".slider-item");
      const pageWidth = wrap.offsetWidth;
      console.log(pageWidth, "pageWidth");
      let startX = 0;
      let moveX = 0;
      let distanceX = 0;
      let slidePageIndex = 0;
      let isMove = false;

      const init = () => {
    
    
        bindEvent();
      };
      function bindEvent() {
    
    
        wrapSlider.addEventListener("touchstart", handleTouchStart);
        wrapSlider.addEventListener("touchmove", handleTouchMove);
        wrapSlider.addEventListener("touchend", handleTouchEnd);
      }
      function handleTouchStart(e) {
    
    
        startX = e.touches[0].clientX;
        console.log(startX);
      }
      function handleTouchMove(e) {
    
    
        moveX = e.touches[0].clientX;
        distanceX = moveX - startX;
        if (
          (slidePageIndex === 0 && distanceX > 0) ||
          (slidePageIndex === sliderItem.length - 1 && distanceX < 0)
        )
          return;
        console.log(distanceX);
        isMove = true;
        setTranslateX(-slidePageIndex * pageWidth + distanceX);
      }
      function handleTouchEnd(e) {
    
    
        if (isMove) {
    
    
          if (Math.abs(distanceX) >= pageWidth / 3) {
    
    
            if (distanceX > 0) {
    
    
              slidePageIndex--;
            }
            if (distanceX < 0) {
    
    
              slidePageIndex++;
            }
          }
          setTranslateX(-slidePageIndex * pageWidth);
        }
        startX = 0;
        moveX = 0;
        distanceX = 0;
        isMove = false;
      }
      function setTranslateX(transX) {
    
    
        wrapSlider.style.transition = "all 0.1s";
        wrapSlider.style.transform = `translateX(${
      
      transX}px)`;
      }
      init();