HTML5+中动态构建列表并填充数据

时间:2023-12-20 23:13:44

部分代码参考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 event
mui.options.maintabid = mui.currentWebview.__uuid__;
// fill head
var curDate = new Date();
fillHeader(curDate); // righticon add event
mui.addEventListenerBySelector("#info", "tap", function() {
plus.device.vibrate();
}); // ajax request data
getListData(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 curdate
existsCache = true;
break;
}
}
if (!existsCache) {
// clear all cache
plus.storage.clear();
} var stKey = "main:" + cdate;
var cdata = plus.storage.getItem(stKey);
if (cdata) {
console.log("read cache");
// fill cached data
cdata = mui.readJson(cdata);
notifiULList(cdata);
} else {
console.log("read real data"); var url = 'http://japi.juhe.cn/toh/toh?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>

根据原作者的提示,我找到了聚合数据这个网站,注册后获取了免费试用接口100次的机会,为了让这个app跑起来,真机测试很多次,后来在聚合网站上测试才发现返回的不是id,而是_id,话说我的心碎了,太不专业了吧,接口文档明摆着,你却返回不一致的东西,这不坑人吗。

HTML5+中动态构建列表并填充数据HTML5+中动态构建列表并填充数据

看来以后还要注意,发现错误, 要大胆质疑,多多实践。