h5select动态加载数据_HTML5+中动态构建列表并填充数据
部分代码参考demo----《历史上的今天》。
感谢作者的分享,愿好人一生平安,虽然只有两个页面,但是通过这个示例让我学会了5+中如何动态构建列表并填充数据,非常实用。
html部分:
历史上的今天
今天:
星期:
js脚本:
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")
}
});
}
根据原作者的提示,我找到了聚合数据这个网站,注册后获取了免费试用接口100次的机会,为了让这个app跑起来,真机测试很多次,后来在聚合网站上测试才发现返回的不是id,而是_id,话说我的心碎了,太不专业了吧,接口文档明摆着,你却返回不一致的东西,这不坑人吗。
看来以后还要注意,发现错误, 要大胆质疑,多多实践。
h5select动态加载数据_HTML5+中动态构建列表并填充数据相关推荐
- JS动态加载脚本及对动态脚本内方法的调用
JS动态加载脚本及对动态脚本内方法的调用 摘要 JS动态加载脚本及对动态脚本内方法的调用 JS 动态 添加脚本 按需加载 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package ...
- ligertoolbar 动态加载按钮_Axure利用动态面板实现环形加载进度条
先来看下效果. 基本原理 上面是组合效果,主要包含三个部分,左半圆.右半圆和中间的百分加载部分.左.右半圆的实现原理很简单,就是利用动态面板的遮挡功能,将一个完整的圆遮挡一半,然后在显示的那一半上面添 ...
- extjs6.0 动态加载_Extjs入门之动态加载树代码
Extjs动态加载树的实现代码,需要的朋友可以参考下. Extjs动态加载树,首先在数据库里面设计存放树信息的表 USE [KimiExtjs] GO /****** 对象: Table [dbo]. ...
- 深度学习-Pytorch:项目标准流程【构建、保存、加载神经网络模型;数据集构建器Dataset、数据加载器DataLoader(线性回归案例、手写数字识别案例)】
1.拿到文本,分词,清晰数据(去掉停用词语): 2.建立word2index.index2word表 3.准备好预训练好的word embedding 4.做好DataSet / Dataloader ...
- Vue中动态加载SVG文件并绑定事件、修改节点数据
大致的流程是这样的:实现这个需求是首先通过一个工具(drawio)去自定义绘制图形,然后导出一个svg格式的文件,后端搞了一下drawio工具的源码,在导出的时候,为绘制的图形上每个节点都去绑定了一个 ...
- java实现动态加载jar包中的class(破坏双亲委派来实现)
背景 最近在项目中在使用Drools来做规则,drools确实功能比较强大,但是学习成本也比较高,语法比较繁琐.我们项目是做的动态规则,用户可以通过上传jar包的方式来动态的再我们ruleengine ...
- java 动态加载控件_JS动态添加节点后渲染为EasyUI控件,EasyUI动态渲染解析解决方案...
这是个小菜在实际工作中遇到的问题,相信很多EasyUI新手很可能也遇到这样的问题,因此小菜觉得有必要拿出来分享一下. 这个问题要从EasyUI的datebox组件说起,小菜用这个组件的时候,发现用$( ...
- GraphView与TreeView等本质关系区别;左侧tree树形列表点击,右侧区域动态加载图纸分割布局动态可拖动中间分隔线
数据可视化前端开发应用体验 GraphView跟TreeView是平级的组件!不是基类.派生关系!一个是拓扑图元组件.一个是树形组件,所有View类型的组件都是视图,用来设置数据模型DataModel ...
- linux的笔画动态加载,关于Android中GestureOverlayView多笔画的问题
前段时间做了个事业单位稽查的项目,客户要求系统支持现场电子签名,由于做Android没多久,这个问题缠绕了我很长时间,现在终于完美解决这个问题了,现在把关键代码贡献给大家. 此代码关键的位置就在类中的 ...
最新文章
- 我用Java+Redis+ES+Kibana技术对数百万知乎用户进行了数据分析,得到了这些...
- element UI el-autocomplete 带输入建议的输入框
- 基数排序算法图解分析
- 国自然申请初审中的注意事项
- 【若依(ruoyi)】swagger 接口 @SessionAttribute 修饰的参数
- python--递归计算n的价乘
- 【LeetCode】【HOT】287. 寻找重复数(抽象环形链表)
- linux 网络管理
- 查看tensorflow版本以及路径:
- 2017-2018-1 20155229 《信息安全系统设计基础》第八周学习总结
- debug运行时出现错误unicodedecodeerror_怎么回事??抖音直播伴侣!出现运行错误...
- 【Linux开发板学习教程】全免费超全面超详细
- 生育医疗费用出院结算流程
- Codeforces Round #727 (Div. 2)题解A-D
- 腾讯辟谣心悦3玩家“特权”;共享充电宝陷入生死危机
- Arcgis中的坐标和投影
- AFM的工作模式(一)
- java 微信获取用户地理位置_Java微信公众平台开发之获取地理位置
- opengl android 纹理贴图 代码,Android 使用opengl es的纹理贴图白屏问题请教。
- linux重命名文件或文件夹(mv命令 rename命令)
热门文章
- 随机化算法-数值随机化算法
- java上机实验报告_javaweb上机实验报告(学生管理系统)
- ajax无法发送json串,如何使用$ .ajax发送JSON而不是查询字符串?
- 悬浮球不用权限_Android 实现无需权限的悬浮球效果,可适配至Android 10
- webflow ajax,java开发之spring webflow实现上传单个文件及多个文件功能实例
- 吴恩达《机器学习》第八章:逻辑回归
- python魔法函数(二)之__getitem__、__len__、__iter__
- Fedora升级后Python虚拟环境中的pip报错
- 从714里连续减去6减几次得0_小学数学1—6年级基础知识整理 ,预习复习都能用...
- python commands_python之commands模块