Comment implémenter la fonction de tournage de page dans JS natif-js tutoriel-php.cn

Comment implémenter la fonction de tournage de page dans JS natif

零到壹度

Libérer： 2018-03-23 09:41:54

original

4700 Les gens l'ont consulté

Cette fois, je vais vous montrer comment implémenter la fonction de tournage de page en JS natif, et quelles sont les précautions pour implémenter la fonction de tournage de page. Ce qui suit est un cas pratique, jetons un coup d'oeil.

Sans plus tard, passons directement au code

<!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>
    #ol1 li{
      width: 100px;
      height: 50px;
      line-height: 50px;
    }
  </style>
</head>
<body>
  <p>
    <ol id="ol1">
      
    </ol>
    <p>
      <button class="pageChange" pageNum="0">第一页</button>
      <button class="pageChange" pageNum="1">第二页</button>
      <button class="pageChange" pageNum="2">第三页</button>
    </p>
  </p>
  <script type="text/javascript">
    window.onload = function () 
    {
      // 自定义数据 实际开发中 数据是从后台获取
      var data = [  
        { name: "aa", age: 10},
        { name: "bb", age: 11},
        { name: "cc", age: 12},
        { name: "dd", age: 23},
        { name: "ee", age: 50},
        { name: "ff", age: 24},
        { name: "gg", age: 62},
        { name: "hh", age: 16},
        { name: "ii", age: 35}
      ]; 

      // 取前三条数据初始化页面
      var oOl = document.getElementById(&#39;ol1&#39;);
      var outStr = "";
      for (var i = 0; i < 3; i++) {
        outStr += &#39;<li><span>&#39; + data[i].name + &#39;</span> <span>&#39; + data[i].age + &#39;</span></li>&#39;;
      }
      oOl.innerHTML = outStr;
      
      // 实现翻页功能
      var aBtn = document.getElementsByClassName(&#39;pageChange&#39;);
      for (var j = 0; j < aBtn.length; j++) { // 为每个页数按钮都设置点击事件
        aBtn[j].onclick = function (event) {
          var pageNum = parseInt(event.target.getAttribute("pageNum")); // 获取自定义属性pageNum的值 并将其转换为数字类型  释：pageNum表明当前时第几页
          outStr = "";
          for (var i = pageNum*3; i < pageNum*3+3; i++) { //通过页数获取data中相应段的值
            outStr += &#39;<li><span>&#39; + data[i].name + &#39;</span> <span>&#39; + data[i].age + &#39;</span></li>&#39;;
          }
          oOl.innerHTML = outStr;
        }
      }
    }
  </script>
</body>
</html>

Copier après la connexion

Résultat d'exécution :