H5开发APP之：根据数据自动生成列表

最新推荐文章于 2024-07-25 20:50:09 发布

liuxudong1001

最新推荐文章于 2024-07-25 20:50:09 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/liuxudong1001/article/details/74216629

版权

H5开发APP时，生成列表的方式与原生Android不同，主要通过JavaScript获取数据并在HTML body中动态插入列表项。每个item绑定点击事件，点击时能获取到详细数据。以下是相关代码实现。

摘要由CSDN通过智能技术生成

H5开发APP跟原生android开发的时候生成列表区别还是非常大的。

思路就是通过js获取数据后向body中插入item。然后添加点击事件，点击事件触发的时候可以获取到当前所点击item的详细数据。

下面是代码，里面有一些介绍。

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/mui.js"></script>
		<script src="js/colorChose.js"></script>
		<style type="text/css">
			ul li {
				list-style-type: none;
			}
		</style>
	</head>

	<body>
		<div id="list">
			<ul id="ul">
			</ul>
		</div>
	</body>

	<script type="text/javascript">
		//获取元素
		var ul = document.getElementById('ul');
		var btn = document.getElementById('btn');
		//鼠标覆盖
		ul.onmouseover = function(event) {
			var event = event || window.event;
			var target = event.target