移动开发学习记录点滴-动态增长列表行数据

时间 2019-12-01

标签移动开发学习记录点滴动态增长列表数据栏目无线繁體版

原文原文链接

1、使用jQueryMobile的第一步，先建立一个html页面，并在head标签中加入如下内容：css

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

注意：顺序不能错：（html

2、动态给列表增长数据
jquery

html代码：app

<div data-role="content">
  <ul data-role="listview" id="contentList">
  <li><a href="#">测试数据1</a></li>
  <li><a href="#">测试数据2</a></li>  
  </ul>
  <p>&nbsp;</p>
  <div id="moreDiv">
  <button id="btnMore" data-icon="refresh">显示更多</button>
  </div>
</div>

js代码：ide

function loadData()
{
  var content = "<li><a href=\"#\">这是加载的数据</a></li>";
  $("#contentList").append(content).listview('refresh');
}

总结：函数

一、列表的显示已经抛弃table元素了，经过ul无序、ol有序代替；测试

二、append函数代替给innerHTML属性赋值；编码

三、添加数据后，须要经过listview('refresh') 方式进行刷新。spa

3、显示“加载中”提示code

//显示loading
function showLoading()
{
  $.mobile.loadingMessageTextVisible = true;
  $.mobile.showPageLoadingMsg("a", "加载中..." );
} 
//隐藏loading
function hideLoading()
{
  $.mobile.hidePageLoadingMsg();
}

4、HTML5设置字符集编码，避免出现乱码；

<!DOCTYPE html>
<meta charset="utf-8">