hbuilder app开发之列表

列表,是HTML开发的常见功能。对于HTML5 APP开发而言,列表的重要性,就更加突出了。那么,列表在HTML5 APP开发中的形状有多少种呢。以及列表在APP下,又是如何实现分页处理的呢。

下面将逐一介绍(想了解hbuilder app开发Input功能,hbuilder app开发

Button,见其它经验)。

0 HTML5 APP开发之Button按钮

0 HTML5 APP开发之Input输入框

工具/原料

HBuilder6.6

MUI2.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-cell"><span class="mui-ellipsis-2">纯文字多行效果,超过两行,将用省略号表示;纯文字多行效果,超过两行,将用省略号表示</span></li>

</li>

</ul>

0 HTML5 APP开发之用户登录

hbuilder app开发之列表

hbuilder app开发之列表

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

代码如下:

<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开发之列表

带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开发之列表

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

代码如下:

<ul class="mui-table-view">

<li class="mui-table-view-cell mui-media">

<a href="#">

<img class="mui-media-object mui-pull-right" src=";>

<div class="mui-media-body">

图文效果

<p class='mui-ellipsis'>信息描述信息描述信息描述信息描述信息描述信息描述信息描述信息描述</p>

</div>

</a>

</li>

</ul>

hbuilder app开发之列表

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

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

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

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

注意事项

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

相关文章

  1. HTML5 APP开发之手机调试页面

    读过上一篇<HTML5 APP开发之浏览器调试页面>文章的网友,会发现浏览器调试HTML5开发的APP页面,有一些问题.则,一.因为手机的浏览器不同,将可能导致在Chrome浏览器下,调试通过的效果,在手机上,没有办法显示:二.有一些特点只支持在手机端显示. 因此,单靠浏览器调试是不够的 ...

  2. APP项目hbuilder开发心得-a标签创建新页面

    要掌握一款新工具,确实不容易: 所以,我把我走过的弯路,遇到的难点在这里汇聚,供大家学习和借鉴: 方法/步骤 首先,请大家开启工具hbuilder,并创建新工程: 接着,请创建四个简单的页面:分别为 home.html,message.html,attention.html,infomation.h ...

  3. 用HEKR IOT-KIT快速开发app,实现远程硬件控制

    即使您是一个软件工程师,没有太多的关于硬件电路的知识,您也可以用IOT中的Arduino快速开发MCU端的程序驱动硬件电路:另一方面,如果您的研究方向偏向于硬件,对APP和前端的开发技术并不是非常了解,您也可以使用HEKR IOT-KIT通过HEKR云服务快速搭建前端页面同时打包成APP,快速实现硬 ...

  4. Hbuilder新建手机APP示例

    Hbuilder使用HTML5构建手机APP应用客户端,今天介绍一个示例如何构建一个可以运行的手机APP应用. 工具/原料 HBUILDER开发工具,可以官网下载 方法/步骤 点击红色圈圈里的"新建移动APP"或者点击"文件"->"新建&quo ...

  5. HTML5 APP开发MUI框架教程--创建移动APP

    HTML5开发App掌握成本低,款平台发布,节省开发成本,MUI最接近原生APP体验的高性能前端框架, 方法/步骤 打开Hbuilder IDE编辑器 Hbuilder 初始化界面,可以看到"新建Web项目"."新建移动APP项目" 1. 直接点击新建移动AP ...

  6. 快速开发工具知多少

    移动互联网时代,应用间的相互竞争趋白热化,但相关工具的增多也在降低APP开发的技术门槛,快发开发工具更是其中的重要部分,戴维列举几种快速开发工具,供开发者参考和学习,大家一起来看看吧. 1.AppMachine AppMachine 是一个跨iOS和Android平台的快速开发工具,它的方便之处在于 ...

  7. HTML5 APP开发之页面性能

    HTML5开发的APP,目前最大的问题,就是体验性问题,则在整体流畅性,方面不如原生APP那么好.这也是为什么用多人不愿意使用HTML5开发的原因.但是,现在的智能手机的性能越来越多.这种问题,就得到有效的解决. 但是,还是得注意一些细节内容,才能有更好的体验.接下来,将介绍如何提高页面的流畅性. ...

  8. HTML5 APP开发之软件打包

    当知道如何创建HTML5 APP项目,以及APP页面如何调试后.接下来,需要考虑的就是HTML5 APP项目打包的事情. 由于HTML5 APP开发使用的环境与APP打包的环境不一样.重点是还得针对IOS和安桌系统进行分别处理.如果本地部署,那花费太量时间,而且,不容易打包成功.那么,有没有一种简单 ...

  9. HTML5 APP开发之浏览器调试页面

    用HTML5开发APP,遇到的第一个问题,便是页面调试问题.总不可能开发一个页面,就打包软件,然后,在手机上安装查看效果吧(因为太花时间了). 所以,为了解决HTML5页面的调试效率,通常有两种方案.第一种,采用chrome浏览器调试:第二种,采用伪发布方式调试. 本章节,将介绍如何采用chrome ...