Comment implémenter le glissement plein écran sur les terminaux mobiles avec JS

Cet article utilise un exemple de code pour partager avec vous comment réaliser l'effet de glissement plein écran sur le terminal mobile basé sur js. L'idée de base est de détecter la direction de glissement du doigt, d'obtenir la position lorsque le doigt est levé. , et soustrayez la position lorsque le doigt est enfoncé. Le résultat correct est la direction. Faites défiler vers le bas, cet article partagera avec vous l'exemple de code JS pour réaliser un glissement en plein écran sur le terminal mobile.

Idée de base :

1) Détecter la direction de glissement du doigt : obtenir la position lorsque le doigt est levé, soustraire la position lorsque le doigt est enfoncé, bien faire les choses signifie glisser vers le bas

2) Après avoir levé le doigt, changez la position de la page en cours dans l'opération inverse correspondante

Le code spécifique est le suivant :

html

<p id="wrap">
  <p id="page01" class="pages">第一屏</p>
  <p id="page02" class="pages">第二屏</p>
  <p id="page03" class="pages">第三屏</p>
  <p id="page04" class="pages">第四屏</p>
</p>
<p id="dots">
  <span class="now"></span><span class=""></span><span class=""></span><span class=""></span>
</p>

css

*{
      margin:0;
      padding:0;
    }
    body{
      overflow: hidden;
    }
    #wrap > p{
      width: 10rem;
      position: absolute;
      left: 0;
      top: 0;
      background: #fff;
      transition: all 0.3s ease;
    }
    #dots{
      position: fixed;
      right: 5px;
      top: 40%;
      z-index: 9;
    }
    #dots span{
      display: block;
      height: 0.2rem;
      width: 0.2rem;
      border: 1px solid #000;
      border-radius: 50%;
      margin-bottom: 3px;
    }
    #dots .now{
      background: #555;
    }

js est divisé en deux parties

Tout d'abord, définissez la taille de la police du balise html afin de définir la cardinalité rem (placée en tête de page)

document.getElementsByTagName("html")[0].style.fontSize = window.innerWidth/10 + "px";

Deuxièmement, le code spécifique de l'opération de glissement

 window.onload = function(){
      var op = document.getElementById("wrap");
      var aPages = op.getElementsByClassName("pages");
      var aDots = document.getElementById("dots").getElementsByTagName("span");
      var winH = window.innerHeight;
      var tTime = 1;
      //设置每页的高度和zindex值
      for(var i=0; i<aPages.length; i++){
        aPages[i].style.height = winH + "px";
        aPages[i].style.zIndex = 1;
      }
      aPages[0].style.zIndex = 3;
      aPages[1].style.zIndex = 2;
      op.style.height = winH + "px";
      //手指拖动事件（去除默认动作）
      document.addEventListener("touchmove",function(e){
        e.preventDefault();
      });
      var YStart = 0;
      var iNow = 0;
      //手指按下
      op.addEventListener("touchstart",function(e){
        YStart = e.changedTouches[0].clientY;
      });
      //手指移动
      op.addEventListener("touchmove",function(e){
        disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑负
      });
      //手指离开
      op.addEventListener("touchend",function(e){
        disY = e.changedTouches[0].clientY-YStart; //向下滑正，向上滑负
        if(Math.abs(disY)>winH/20){ //只有当滑动距离大于了一定值得时候，才执行切换
          if(disY<0){
            iNow++;
            if(iNow>=aDots.length){
              iNow = 0;
            }
            aPages[0].style.transform = "translateY("+ -winH +"px)";
            doSlide();
          }else{
            iNow--;
            if(iNow<0){
              iNow = aDots.length-1;
            }
            aPages[0].style.transform = "translateY("+ winH +"px)";
            doSlide("up");
          }
        }
      });
      function doSlide(upflag){
        for(var i=0;i<aDots.length;i++){
          aDots[i].className = "";
        }
        aDots[iNow].className = "now";
        if(upflag){
            //向上滑
            aPages[3].style.zIndex = 2;
            aPages[1].style.zIndex = 1;
            op.insertBefore(aPages[3],aPages[1]);
            setTimeout(function(){
              aPages[1].style.transform = "translateY(0px)";
              aPages[1].style.zIndex = 2;
              aPages[0].style.zIndex = 3;
            },300)
        }else{
          setTimeout(function(){
            aPages[0].style.transform = "translateY(0px)";
            aPages[0].style.zIndex = 1;
            aPages[1].style.zIndex = 3;
            aPages[2].style.zIndex = 2;
            op.appendChild(aPages[0]);
          },300)
        }
      }
    }

Bon , permettez-moi de partager avec vous un code simple, JS implémente l'affichage sur écran coulissant pleine page sur le terminal mobile. Le code spécifique est le suivant :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0" />
    <meta name="format-detection" content="telephone=no" />
    <meta content="yes" name="mobile-web-app-capable">
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <title>移动端整页滑屏示例</title>
    <style type="text/css">
      * {
        padding: 0;
        margin: 0;
        font-family: Verdana;
      }
      body,
      html {
        height: 100%;
        background-color: #000000;
      }
      .wrap {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
      .wrap2 {
        width: 100%;
        height: 1000%;
        transition: 0.3s linear
      }
      .page {
        width: 100%;
        height: 10%
      }
      .page {
        background-color: #fdfdfd;
        font-size: 100px;
        line-height: 400px;
        text-align: center;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <p class="wrap" id="wrap">
      <p class="wrap2" id="wrap2">
        <p class="page">1</p>
        <p class="page" style="background-color:#dddddd;">2</p>
        <p class="page">3</p>
        <p class="page" style="background-color:#dddddd;">4</p>
        <p class="page">5</p>
        <p class="page" style="background-color:#dddddd;">6</p>
      </p>
    </p>
    <script type="text/javascript">
      //重要！禁止移动端滑动的默认事件
      document.body.addEventListener(&#39;touchmove&#39;, function(event) {
        event = event ? event : window.event;
        if(event.preventDefault) {
          event.preventDefault()
        } else {
          event.returnValue = false
        }
      }, false)
      var pages = function(obj) {
        var box = document.getElementById(obj.wrap);
        var box2 = document.getElementById(obj.wrap2);
        var len = obj.len;
        var n = obj.n;
        var startY, moveY, cliH;
        //获取屏幕高度
        var getH = function() {
          cliH = document.body.clientHeight
        };
        getH();
        window.addEventListener(&#39;resize&#39;, getH, false);
        //touchStart
        var touchstart = function(event) {
          if(!event.touches.length) {
            return;
          }
          startY = event.touches[0].pageY;
          moveY = 0;
        };
        //touchMove
        var touchmove = function(event) {
          if(!event.touches.length) {
            return;
          }
          moveY = event.touches[0].pageY - startY;
          box2.style.transform = &#39;translateY(&#39; + (-n * cliH + moveY) + &#39;px)&#39;; //根据手指的位置移动页面
        };
        //touchEnd
        var touchend = function(event) {
          //位移小于+-50的不翻页
          if(moveY < -50) n++;
          if(moveY > 50) n--;
          //最后&最前页控制
          if(n < 0) n = 0;
          if(n > len - 1) n = len - 1;
          //重定位
          box2.style.transform = &#39;translateY(&#39; + (-n * 10) + &#39;%)&#39;; //根据百分比位置移动页面
          console.log(n)
        };
        //touch事件绑定
        box.addEventListener("touchstart", function(event) {
          touchstart(event)
        }, false);
        box.addEventListener("touchmove", function(event) {
          touchmove(event)
        }, false);
        box.addEventListener("touchend", function(event) {
          touchend(event)
        }, false);
      };
      pages({
        wrap: &#39;wrap&#39;, //.wrap的id
        wrap2: &#39;wrap2&#39;, //.wrap2的id
        len: 6, //一共有几页
        n: 0 //页面一打开默认在第几页？第一页就是0，第二页就是1
      });
    </script>
  </body>
</html>

Recommandations associées :

Comment l'implémenter sur le terminal mobile en utilisant CSS Exemple de glissement vers la gauche et la droite

L'applet WeChat réalise un glissement vers la gauche pour supprimer l'effet

Nouveau code d'implémentation de l'effet de glissement en bas de JS (imitation Vanke)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!