Maison >interface Web >js tutoriel >Comment implémenter la fonction de tournage de page dans JS natif

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

零到壹度original: 2018-03-23 09:41:544695parcourir

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>

Résultat d'exécution :

Cliquez le bouton de page Vous pouvez basculer pour afficher différentes données

Liens connexes :

Comment réaliser la fonction de changement de page dans la page Web

Comment JS réalise-t-il la pagination automatique ?

Comment utiliser le code JS pour écrire l'effet de changement de page de la barre de navigation

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Méthode de communication des composants parent-enfant Angular2Article suivant：Méthode de communication des composants parent-enfant Angular2

Articles Liés

Voir plus