一：列表視圖

列表區用來以列表的風格來組織元素，級別上與內容區(Content Block)同級，因此不能將list-block包含在content-block中！

<div class="list-block">
    <ul>
        <li>
        列表元素。。。
        </li>
        ......
    </ul>
    <div class="list-block-label">List block label text</div>
</div
 
>

二：舊版列表視圖

舊版列表視圖功能比較少，使用 list-block 標簽包含列表視圖。

從功能上劃分，主要有兩種列表：簡單陳列、鏈接列表。簡單陳列只是用來顯示數據，點擊列表元素無反應；鏈接列表中的列表元素則是一個超鏈接，點擊後跳轉到元素詳情。

從外觀上劃分，種類就更多了：簡單文本型、圖標+文本型、圖片+文本型......

高階功能：列表分隔、列表元素分組、列表視圖內嵌風格。

1:簡單陳列元素

<li class="item-content">
    <div class="item-media">
        <
 
i class="icon my-icon"></i>
    </div>
    <div class="item-inner">
        <div class="item-title">
            List element title
        </div>
        <div class="item-after">
            List element label
        </div>
    </div>
</li>

2:鏈接列表元素

<li>
      <a href="#" class="item-link item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item title</div>
          <div class="item-after">Label</div>
        </div>
      </a>
</li>

3:列表分隔

 <li class="item-divider">分隔行標題</li>

4:列表分組（其實就是兩個列表）

 <!-- 1:第一個分組-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">分組標題</li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">元素標題</div>
          <div class="item-after">元素標簽</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">元素標題</div>
          <div class="item-after"><span class="badge">角標</span></div>
        </div>
      </li>
      ...
    </ul>
  </div>

  <!-- 2:第二個分組-->
  <div class="list-group">
    <ul>
      <li class="list-group-title">Second Group</li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item title</div>
          <div class="item-after">Label</div>
        </div>
      </li>
      <li class="item-content">
        <div class="item-media"><i class="icon icon-f7"></i></div>
        <div class="item-inner">
          <div class="item-title">Item with badge</div>
          <div class="item-after"><span class="badge">5</span></div>
        </div>
      </li>
      ...
    </ul>
  </div>

5:視圖內嵌

可以在列表視圖的div中增加 inset、tablet-inset類來實現內嵌視圖風格。

三：新版列表視圖

Framework7學習筆記之 列表視圖