部分代码参考demo—-《历史上的今天》。
感谢作者的分享，愿好人一生平安，虽然只有两个页面，但是通过这个示例让我学会了5+中如何动态构建列表并填充数据，非常实用。
html部分：
<body> <header class="mui-bar mui-bar-nav"> <a id="info" class="mui-icon mui-icon-info-filled mui-pull-right" style="color: #999;"></a> <h1 class="mui-title">历史上的今天</h1> </header> <div class="mui-content"> <ul class="mui-table-view"> <li class="mui-table-view-divider"> <span class="fs14">今天：</span><span class="mui-badge mui-badge-blue" id="curdatestr"></span> <span style="margin-left: 50px;"></span> <span class="fs14">星期：</span><span class="mui-badge mui-badge-red" id="curdateweekstr"></span> </li> <ul class="mui-table-view" id="TIH_EventList_UL"> </ul> </ul> </div><pre name="code" class="html"></body>
js脚本:
<script type="text/javascript">window.onload = function() {mui.init();mui.plusReady(function() {// for Android back eventmui.options.maintabid = mui.currentWebview.__uuid__;// fill headvar curDate = new Date();fillHeader(curDate);// righticon add eventmui.addEventListenerBySelector("#info", "tap", function() {plus.device.vibrate();});// ajax request datagetListData(curDate);});}function fillHeader(cdate) {mui.html('curdatestr', cdate.toString("yyyy年MM月dd日"));mui.html('curdateweekstr', cdate.week());}function getListData(cdate) {if (!mui.constMap.key_historyOnToday) {mui.toast("请在app.js中配置KEY!!! ");return;}plus.nativeUI.showWaiting("数据加载中，请稍候…");console.log(plus.storage.getLength());var existsCache = false;for (var i = 0; i < plus.storage.getLength(); i++) {var stVal = plus.storage.key(i);console.log(stVal.substring(5).length + "========" + cdate.toString().length);if (stVal.substring(5) == cdate.toString()) {// exists cache date in curdateexistsCache = true;break;}}if (!existsCache) {// clear all cacheplus.storage.clear();}var stKey = "main:" + cdate;var cdata = plus.storage.getItem(stKey);if (cdata) {console.log("read cache");// fill cached datacdata = mui.readJson(cdata);notifiULList(cdata);} else {console.log("read real data");var url = '?key=' + mui.constMap.key_historyOnToday + 'dtype=json&v=1.0&month=' + cdate.month() + '&day=' + cdate.day();mui.sendRequest(url, {}, function(result) {if (result.success) {var n = result.retval.result;notifiULList(n);plus.storage.setItem(stKey, mui.writeJson(n));} else {mui.toast(result.error);}}, 'json');}};function notifiULList(cdataList) {plus.nativeUI.closeWaiting();var doc = document,fragment = doc.createDocumentFragment(),container = doc.getElementById("TIH_EventList_UL");mui.each(cdataList, function(i, n) {console.info(n.id)notifiAndSetLiDetail(fragment, n);});container.appendChild(fragment);mui.addEventListenerBySelector("a.aEvent", "tap", showDetail);}function notifiAndSetLiDetail(fragment, n) {var doc = document,li = doc.createElement("li"),a = doc.createElement("a"),img = doc.createElement("img"),div = doc.createElement("div"),p = doc.createElement("p");li.setAttribute("class", "mui-table-view-cell mui-media");console.info(n._id)//明明是_id 接口上说id 坑我a.setAttribute("eid", n._id);//a.addEventListener("click", showDetail(n.id)); //note:showDetail() has been called every times. i dont know why.a.setAttribute("class", "aEvent");img.setAttribute("class", "mui-media-object mui-pull-left");img.setAttribute("style", "width: 42px; height: 42px;");img.setAttribute("src", n.pic.isBlank() ? 'images/logo.png' : n.pic);div.setAttribute("class", "mui-media-body");div.innerText = n.title;p.innerHTML = n.year + "年" + n.month + "月" + n.day + "日" + ", " + n.lunar;li.appendChild(a);a.appendChild(img);a.appendChild(div);div.appendChild(p);fragment.appendChild(li);}function showDetail(o) {var a = o.target.offsetParent;if (a.tagName != 'A') {// fix the end of line onclick event, it's return li not a, i dont know why.return;}mui.openWindow({id: "detail.html",url: "detail.html",show: {autoShow: false},extras: {eid: a.getAttribute("eid")}});}</script>
路遥知马力，日久见人心。
