1、纯列表显示，则列表里每一行都只有文字。这里将介绍两种用法：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-cell"><span class="mui-ellipsis-2">纯文字多行效果，超过两行，将用省略号表示;纯文字多行效果，超过两行，将用省略号表示</span></li> </li> </ul>
2、带箭头和数字列表显示。这种样式，通过用于带有汇总或统计的场景。代码如下：<ul class="mui-table-view"> <li class="mui-table-view-cell"> <a class="mui-navigate-right"> <span class="mui-badge">999</span> 带箭头和数字的效果 </a> </li> </ul>
3、带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、带图片列表显示。这种样式，应该说是最常见的作法。主要用于信息展示类场景。代码如下：<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、无论哪些效果的列表，都避免不了分页查看的需求。对于手机端，通用都是使用下拉刷新方式实现。第一种下拉刷新方式比较简单：一次性获取全部的数据，再进行假刷新。（性能会受影响）第二种下拉刷新方式较为复杂：动态获取一页的数据，再进行刷新。（工作量会过一些）需要实现pullRefresh事件，将在其它经验里详细介绍操作。