HBuilder开发-列表页
作者：陈伟忠 撰写时间：2019年5月7号
页面源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- mui -->
<link type="text/css" rel="stylesheet" href="@/css/mui.min.css"/>
<script type="text/javascript" src="@/js/mui.min.js"></script>
</head>
<body>
<div class="mui-content">
<ul class="mui-table-view" style="margin-top:0;display:none;" id="todolist"></ul>
</div>
<!-- jquery -->
<script type="text/javascript" src="@/js/lib/jquery-1.11.2.min.js"></script>
<!-- qiao.js -->
<script type="text/javascript" src="@/js/lib/qiao.js"></script>
<!-- app -->
<script type="text/javascript" src="@/js/app/list.js"></script>
</body>
</html>
页面用了mui中的列表组件
JS代码：
// 初始化
mui.init({
});
var tapId = null;
// 所有的方法都放到这里
mui.plusReady(function(){
// 获取列表
initHelp();
});
function initHelp(){
var help = qiao.h.getItem('help');
if(help == 'first'){
qiao.h.update(qiao.h.db(), getSql(1, '事项5', '待办事项5'));
qiao.h.update(qiao.h.db(), getSql(2, '事项4', '待办事项4'));
qiao.h.update(qiao.h.db(), getSql(3, '事项3', '待办事项3'));
qiao.h.update(qiao.h.db(), getSql(4, '事项2', '待办事项2'));
qiao.h.update(qiao.h.db(), getSql(5, '事项1', '待办事项1'));
qiao.h.update(qiao.h.db(), getSql(6, '功能8', '退出程序'));
qiao.h.update(qiao.h.db(), getSql(7, '功能7', '右滑菜单'));
qiao.h.update(qiao.h.db(), getSql(8, '功能6', '左上角查看完成事项'));
qiao.h.update(qiao.h.db(), getSql(9, '功能5', '右上角添加待办事项'));
qiao.h.update(qiao.h.db(), getSql(10, '功能4', '长按待办事项可以删除'));
qiao.h.update(qiao.h.db(), getSql(11, '功能3', '右滑待办事项可以完成'));
qiao.h.update(qiao.h.db(), getSql(12, '功能2', '点击待办事项可以查看详情'));
qiao.h.update(qiao.h.db(), getSql(13, '功能1', '首页显示待办事项列表'));
qiao.h.insertItem('help','notfirst');
}
initList();
}
function getSql(index, title, content){
return 'insert into t_plan_day_todo (id, plan_title, plan_content) values (' + index + ', "' + title + '", "' + content + '")';
}
// 初始化待办事项
function initList(){
var $ul = $('#todolist').empty();
qiao.h.query(qiao.h.db(), 'select * from t_plan_day_todo order by id desc', function(res){
for (i = 0; i < res.rows.length; i++) {
$ul.append(genLi(res.rows.item(i)));
}
showList($ul);
});
}
function genLi(data){
var id = data.id;
var title = data.plan_title;
var content = data.plan_content;
var li =
'<li class="mui-table-view-cell" id="todoli_' + id + '" data-id="' + id + '">' +
'<div class="mui-slider-right mui-disabled">' +
'<a class="mui-btn mui-btn-red doneBtn">完成</a>' +
'</div>' +
'<div class="mui-slider-handle">' +
'<div class="mui-media-body">' +
title +
'<p class="mui-ellipsis">'+content+'</p>' +
'</div>' +
'</div>' +
'</li>';
return li;
}
function showList(ul){
if(ul.find('li').size() > 0 && ul.is(':hidden')) ul.show();
}
JS中只做了两件事情：
1.初始化一些数据
用index页面添加到本地存储的help=first做判断，如果是第一次启动app就初始化一些数据，
然后用websql给表中添加了一些数据
2.获取数据并显示
每次进入list页面都回去websql中读取数据，并用jquery拼装好放到页面上，
这里用jq简单的拼装，没有引入其他复杂的js模版，js mv*框架。