列表，是HTML开发的常见功能。对于HTML5 APP开发而言，列表的重要性，就更加突出了。那么，列表在HTML5 APP开发中的形状有多少种呢。以及列表在APP下，又是如何实现分页处理的呢。 下面将逐一介绍（想了解hbuilder app开发Input功能，hbuilder app开发Button,见其它经验）。工具/原料moreHBuilder6.6MUI2.5方法/步骤1/5分步阅读

纯列表显示，则列表里每一行都只有文字。这里将介绍两种用法：1、单行文字；2、多行文字。注意，录文字过长时，应该添加类似class=mui-ellipsis-2的样式。mui-ellipsis-2 表示超过两行，将以省略号表示。那么，有没有超过一或三行，将以省略号表示的样式呢，答案是肯定的。

代码如下：

ul class=mui-table-view

li class=mui-table-view-cell纯文字单行效果/li

li class=mui-table-view-cellspan class=mui-ellipsis-2纯文字多行效果，超过两行，将用省略号表示;纯文字多行效果，超过两行，将用省略号表示/span/li

/li

/ul

2/5

带箭头和数字列表显示。这种样式，通过用于带有汇总或统计的场景。

代码如下：

ul class=mui-table-view

li class=mui-table-view-cell

a class=mui-navigate-right

span class=mui-badge999/span

带箭头和数字的效果

/a

/li

/ul

3/5

带input类控件列表显示。这种样式，一般用于选择项的场景。

代码如下：

ul class=mui-table-view

li class=mui-table-view-cell mui-radio mui-left

input name=radio type=radio带input类控件的效果

/li

/ul

4/5

带图片列表显示。这种样式，应该说是最常见的作法。主要用于信息展示类场景。

代码如下：

ul class=mui-table-view

li class=mui-table-view-cell mui-media

a href=#

img class=mui-media-object mui-pull-right src=http://dcloudio.github.io/mui/assets/img/muwu.jpg

div class=mui-media-body

图文效果

p class=mui-ellipsis信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述/p

/div

/a

/li

/ul

5/5

无论哪些效果的列表，都避免不了分页查看的需求。对于手机端，通用都是使用下拉刷新方式实现。

第一种下拉刷新方式比较简单：一次性获取全部的数据，再进行假刷新。（性能会受影响）

第二种下拉刷新方式较为复杂：动态获取一页的数据，再进行刷新。（工作量会过一些）

需要实现pullRefresh事件，将在其它经验里详细介绍操作。

注意事项

下拉方式刷新，注意是在原来的数据基础上，插入新的内容。

APPHBUILDER列表MUI列表