H5-移动端实现滑屏翻页-原生js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>触摸滑屏</title>
  <style>
    html,body,h2 {
      margin: 0;
      padding: 0;
    }
    html,body,#wraper,#content {
      width: 100%;
      height: 100%;
    }
    #wraper {
      overflow: hidden;
    }
    #content {
      transition: all 1s linear;
    }
    .page {
      width: 100%;
      height: 100%;
    }
    #page1 {
      background: #f00
    }
    #page2 {
      background: #0f0
    }
    #page3 {
      background: #00f
    }
  </style>
</head>
<body>
  <div id="wraper">
    <div id="content">
      <div class="page" id="page1">
        page1
      </div>
      <div class="page" id="page2">
        page2
      </div>
      <div class="page" id="page3">
        page3
      </div>
    </div>
  </div>
  <script>
    var page1 = document.getElementById('page1'),        //滑动item
        page2 = document.getElementById('page2'),
        page3 = document.getElementById('page3'),
        wraper = document.getElementById('wraper'),
        content = document.getElementById('content');    //滑动容器
    var itemHeight = wraper.offsetHeight;                //滑动item高度         
    var index = 0;                                       //滑动计数
    var moveY,                                           //滑动距离
        endY,                                            //滑动停止的Y坐标
        startY;                                          //滑动开始的Y坐标
    // content.style.height = (itemHeight * 3) + 'px'
    // 触摸开始
    function boxTouchStart(e) {
      console.log(e)
      var touch = e.touches[0];
      startY = touch.pageY;
      endY = content.style.webkitTransform;
      if(!endY){
        endY = 0;
      }else{
        endY = parseInt(endY.replace('translateY(',''))
      }
    }
   
     // 触摸结束
    function boxTouchEnd(e) {
      console.log(e)
    }
    // 触摸移动
    function boxTouchMove(e) {
      var touch = e.touches[0];
      moveY = touch.pageY - startY;
      index = Number(e.target.id.split('page')[1])

        //下一页
      if(moveY < 0) {
        if(index == 3) {
          return false;
        }   
        content.style.webkitTransform = 'translateY(-'+(itemHeight*index)+'px)' 
      }
      //上一页
      else if(moveY > 0) {
        if(index == 1) {
          return false;
        }
        content.style.webkitTransform = 'translateY('+(itemHeight+endY)+'px)' 
      }

    }
    content.addEventListener('touchstart', boxTouchStart, false )
    content.addEventListener('touchmove', boxTouchMove, false)
    content.addEventListener('touchend', boxTouchEnd, false)
    
  </script>
</body>
</html>
ps: 水平位置同理，将Y换成X即可
H5-移动端实现滑屏翻页-原生js

猜你喜欢
