列表是常用的UI控件，mui封裝的列表組件比較簡單，只需要在ul節點上添加.mui-table-view類、在li節點上添加.mui-table-view-cell類即可，如下為示例代碼 ~~~ <ul class="mui-table-view"> <li class="mui-table-view-cell">Item 1</li> <li class="mui-table-view-cell">Item 2</li> <li class="mui-table-view-cell">Item 3</li> </ul> ~~~ 點擊列表，對應列表項顯示灰色高亮，若想自定義高亮顏色，只需要重寫.mui-table-view-cell.mui-active即可，如下： ~~~ /*點擊變藍色高亮*/ .mui-table-view-cell .mui-active{ background-color: #0062CC; } ~~~ 若右側需要增加導航箭頭，變成導航鏈接，則只需在li節點下增加a子節點，并為該a節點增加.mui-navigate-right類即可，如下： ~~~ <ul class="mui-table-view"> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 1</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 2</a> </li> <li class="mui-table-view-cell"> <a class="mui-navigate-right">Item 3</a> </li> </ul> ~~~ mui支持將數字角標、按鈕、開關等控件放在列表中；mui默認將數字角標放在列表右側顯示，代碼如下： ~~~ <ul class="mui-table-view"> <li class="mui-table-view-cell">Item 1 <span class="mui-badge mui-badge-primary">11</span> </li> <li class="mui-table-view-cell">Item 2 <span class="mui-badge mui-badge-success">22</span> </li> <li class="mui-table-view-cell">Item 3 <span class="mui-badge">33</span> </li> </ul> ~~~