ionic is a lightweight mobile UI library with the characteristics of fast speed, modern interface and beautiful appearance. In order to solve the problem of some other UI libraries running slowly on mobile phones, it directly gave up support for versions below IOS6 and Android4.1 to obtain a better user experience.

ionic list syntax

List is a widely used interface element that is used in almost all mobile apps.

Lists can be basic text, buttons, switches, icons, thumbnails, etc.

List items can be any HTML elements. The container element requires the list class, and each list item requires the item class.

ionList and ionItem can easily support various interaction methods, such as sliding editing, drag sorting, and deleting items.

ionic list example

<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中文網(wǎng)(php.cn)</title>
????????<link?>
????????<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>

運(yùn)行實(shí)例 ?

點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例