ionic ist eine leichte mobile UI-Bibliothek mit den Eigenschaften hoher Geschwindigkeit, moderner Benutzeroberfläche und schönem Erscheinungsbild. Um das Problem zu lösen, dass einige andere UI-Bibliotheken auf Mobiltelefonen langsam laufen, wurde die Unterstützung für Versionen unter IOS6 und Android4.1 direkt aufgegeben, um eine bessere Benutzererfahrung zu erzielen.

ionische Liste Syntax

Liste ist ein weit verbreitetes Oberflächenelement und wird in fast allen mobilen Apps verwendet.

Listen können einfacher Text, Schaltflächen, Schalter, Symbole, Miniaturansichten usw. sein.

Listenelemente können beliebige HTML-Elemente sein. Das Containerelement erfordert die Listenklasse und jedes Listenelement erfordert die Elementklasse.

ionList und ionItem können verschiedene Interaktionsmethoden problemlos unterstützen, z. B. gleitendes Bearbeiten, Ziehen, Sortieren und Löschen von Elementen.

ionische Liste Beispiel

<html ng-app="ionicApp">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
        <title>PHP中文网(php.cn)</title>
        <link href="https://cdn.bootcss.com/ionic/1.3.2/css/ionic.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/ionic/1.3.2/js/ionic.bundle.min.js"></script>
    </head>
    <body>
    
    <div class="bar bar-header">
      <div class="h1 title">列表</div>
    </div>
    
    <div class="content has-header">

      <ul class="list">

        <li class="item">
          Battletoads
        </li>
        <li class="item">
          Contra
        </li>
        <li class="item">
          Duck Tales
        </li>
        <li class="item">
          Mega Man
        </li>
        <li class="item">
          Metroid
        </li>
        <li class="item">
          Mike Tyson's Punch-Out
        </li>
        <li class="item">
          R.C. Pro-Am
        </li>
        <li class="item">
          Spy Hunter
        </li>
        <li class="item">
          Super Mario Bros.
        </li>
        <li class="item">
          The Legend of Zelda
        </li>

      </ul>

    </div>
    
  </body>
</html>

Instanz ausführen »

Klicken Sie auf die Schaltfläche „Instanz ausführen“, um die Online-Instanz anzuzeigen