列表

任何一个app都会有列表类的布局,使用AUI基本可以满足大多数开发者的需求。AUI提供的默认布局样式有普通列表,图文列表,图片列表,计数列表(购物车效果),类似通讯录效果,开发者可以结合栅格系统来布局出更丰富的样式。

学习这块,单凭看是没有多大效果的,建议大家多练习一下。

.aui-list-view 普通列表类的布局容器,.aui-list-view-cell列表项


<div class="aui-content"><ul class="aui-list-view">
            <li class="aui-list-view-cell" data-win="list_arrow">
                单行列表标题效果
            </li>
            <li class="aui-list-view-cell" data-win="list_thumb">
                单行列表标题效果
            </li>
            <li class="aui-list-view-cell" data-win="list-image">
                单行列表标题效果
            </li>
        </ul></div><div class="aui-content-padded"><ul class="aui-list-view">
            <li class="aui-list-view-cell" data-win="list_arrow">
                卡片式单行列表标题效果
            </li>
            <li class="aui-list-view-cell" data-win="list_thumb">
                卡片式单行列表标题效果
            </li>
            <li class="aui-list-view-cell" data-win="list-image">
                卡片式单行列表标题效果
            </li>
        </ul></div>