hbuilder app开发之列表

 时间:2024-10-16 16:38:20

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>

hbuilder app开发之列表
hbuilder app开发之列表

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>

hbuilder app开发之列表

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>

hbuilder app开发之列表

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>

hbuilder app开发之列表

5、无论哪些效果的列表,都避免不了分页查看的需求。对于手机端,通用都是使用下拉刷新方式实现。第一种下拉刷新方式比较简单:一次性获取全部的数据,再进行假刷新。(性能会受影响)第二种下拉刷新方式较为复杂:动态获取一页的数据,再进行刷新。(工作量会过一些)需要实现pullRefresh事件,将在其它经验里详细介绍操作。

  • flash中制作渐隐渐现来回走动变大变小的五角星
  • axure怎么统计多行文本框输入的文字数?
  • Animate/FLASH如何制作不停外散的光圈动画
  • css如何设置文字的水平方向浮动
  • Flash如何使用矩形工具
  • 热门搜索
    手抄报的格式 小学四年级手抄报大全 感念师恩手抄报 健康小常识手抄报 四季手抄报 汉字王国手抄报 以书为友手抄报 关于读书手抄报资料 感恩亲情手抄报 阳光体育手抄报