简介
列表可以是基本文字、按钮，开关，图标和缩略图等。列表视图支持各种交互模式，如编辑，滑动编辑，拖动重新排序，拉动刷新。闲言不多叙，直接开撸
为了封面好看，先把最终效果贴出来，就是这么耿直
下面是一个普通样式的列表
<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> </ul></div>
我们可以使用 item-divider 类来为列表创建分隔符，默认情况下，列表项以不同的背景颜色和字体加粗来区分，但你也可以很容易的定制他。且看我略施小计，定制一个item-divider1样式
<div class="bar bar-header"> <div class="h1 title">列表</div></div><div class="content has-header"> <ul class="list"> <a class="item item-divider" href="https://www.jianshu.com/p/509d839f063a">Battletoads</a> <li class="item">Contra</li> <li class="item">Duck Tales</li> <li class="item">Mega Man</li> <a class="item item-divider1" href="https://www.jianshu.com/u/4442d7b4fe6f">Metroid</a> <li class="item">Mike Tyson's Punch-Out</li> <li class="item">R.C. Pro-Am</li> <li class="item">Spy Hunter</li> </ul></div>
说是分隔符，实际就是区别于其他列表项样式的列表，最起码看起来就很妖艳，很做作，和其它的小清新列表项很不一样，上面实例中，我们在列表项中使用了 <a> 标签，使得每个分隔符可点击。点击之后就像这样
按钮感觉很好用，把上面例子中第二个分隔符改成按钮看看效果
<div class="bar bar-header"> <div class="h1 title">列表</div></div><div class="content has-header"> <ul class="list"> <a class="item item-divider" href="https://www.jianshu.com/u/4442d7b4fe6f">Battletoads</a> <li class="item">Contra</li> <li class="item">Duck Tales</li> <li class="item">Mega Man</li> <div class="item item-button-right"> Metroid <a class="button button-positive" href="https://www.jianshu.com/p/509d839f063a"> <li class="icon ion-ios-telephone"></li> </a> </div> <li class="item">Mike Tyson's Punch-Out</li> <li class="item">R.C. Pro-Am</li> <li class="item">Spy Hunter</li> </ul></div>
妥妥的，点击右边的按钮也可以实现页面跳转功能
同样的列表里也可以出现图标，我们可以在列表项的左侧或右侧指定图标。
使用 item-icon-left 图标在左侧， item-icon-right 设置图标在右侧。如果你需要在两边都有图标，则两个类都添加上即可。
<div class="bar bar-header"> <div class="h1 title">列表</div></div><div class="content has-header"> <ul class="list"> <a class="item item-divider" href="https://www.jianshu.com/u/4442d7b4fe6f">Battletoads</a> <li class="item item-icon-left" > <a href="https://www.jianshu.com/p/509d839f063a"> <i class="icon ion-person-stalker"></i> </a> Friends <a href="https://www.jianshu.com/u/4442d7b4fe6f"> <span class="badge badge-assertive">0</span> </a> </li> <li class="item item-icon-left"> <i class="icon ion-ios-game-controller-b"></i> Duck Tales <span class="item-note"> Super Mario </span> </li> <li class="item">Mega Man</li> <div class="item item-button-right"> Metroid <a class="button button-positive" href="https://www.jianshu.com/p/509d839f063a"> <li class="icon ion-ios-telephone"></li> </a> </div> <li class="item">Mike Tyson's Punch-Out</li> <li class="item">R.C. Pro-Am</li> <li class="item">Spy Hunter</li> </ul></div>
最常见的好友列表里面是会有头像的，这里当然也能做到，有圆的有方的，看你自己喜欢哪一款吧
<div class="bar bar-header"> <div class="h1 title">列表</div></div><div class="content has-header"> <ul class="list"> <a class="item item-divider" href="https://www.jianshu.com/u/4442d7b4fe6f">Battletoads</a> <li class="item item-icon-left" > <a href="https://www.jianshu.com/p/509d839f063a"> <i class="icon ion-person-stalker"></i> </a> Friends <a href="https://www.jianshu.com/u/4442d7b4fe6f"> <span class="badge badge-assertive">0</span> </a> </li> <li class="item item-icon-left"> <i class="icon ion-ios-game-controller-b"></i> Duck Tales <span class="item-note"> Super Mario </span> </li> <a class="item item-avatar" href="http://upload-images.jianshu.io/upload_images/9723136-2e8bd8629f2c6548.png"> <img src="111.png"> <h2>天下行走</h2> <p>秋雨梧桐叶落时</p> </a> <div class="item item-button-right"> Metroid <a class="button button-positive" href="https://www.jianshu.com/p/509d839f063a"> <li class="icon ion-ios-telephone"></li> </a> </div> <a class="item item-thumbnail-left" href="http://upload-images.jianshu.io/upload_images/9723136-2e8bd8629f2c6548.png"> <img src="111.png"> <h2>邪人君子</h2> <p>一蓑烟雨任平生</p> </a> <li class="item">R.C. Pro-Am</li> <li class="item">Spy Hunter</li> </ul></div>
作者：邪人君子
链接：https://www.jianshu.com/p/509d839f063a
随时随地看视频
