简介

列表可以是基本文字、按钮，开关，图标和缩略图等。列表视图支持各种交互模式，如编辑，滑动编辑，拖动重新排序，拉动刷新。闲言不多叙，直接开撸

为了封面好看，先把最终效果贴出来，就是这么耿直

下面是一个普通样式的列表

<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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="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