如何快速开发H5列表页面

确定后需求后就要选择合适的技术框架和开发工具进行开发，由于小编在做这个任务之前也没有手机H5开发的项目经验，只在平时阅读技术文章时有一些了解，所以当时想出了以下几种选择： 1、 Eclipse工具+Juqery Mobile UI框架； 2、 Eclipse工具+Juqery框架+iScroll框架； 3、 Hbuilder工具+MUI框架； 4、 WeX5工具及其自带的UI框架。

通过比较以上四种组合，小编发现Hbuilder工具+MUI框架这个组合有明显的优势，主要表现在以下几个方面： 1、 Hbuilder工具简单、易用，尤其是强大的联想功能可以极大的简化开发； 2、 可以扩展丰富的插件，比如内置浏览器插件，可以实现刷新页面； 3、 MUI框架具备丰富的示例及技术文档，初学者也可以快速上手； 4、 MUI框架项目只需要引入mui.min.js、mui.min.css即可，是一个轻量级的框架 基于以上优势，小编选择Hbuilder工具+MUI框架来完成H5列表页面的开发，下面小编将会为大家介绍如何快速实现这个H5列表页面。

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, t");

<!--下拉刷新容器-->
		<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron"></ul>
			</div>
		</div>
		<script>
			mui.init({
				pullRefresh: {
					container: #pullrefresh,
					down: {
						style: circle,
						callback: pulldownRefresh
					},
					up: {
						auto: true,
						contentrefresh: 正在加载...,
						callback: pullupRefresh
					}
				}
			});
			var openId = o69AI5_BfceXayCj6do_sbERr_ek;
			var addNum = 0,	pageSize = 10, rowsTotal = 1; 
			function getOrderList() {
				mui.get(
					http://localhost:8080/ysp/getOrderList?openId= + openId + &offset= + addNum + &limit= + pageSize, {},
					function(data) {
						add(data);
					}, json
				);
			}
			function pullupRefresh() {
				setTimeout(function() {
					//当所有数据都加载完成时代表没有更多数据了
					mui(#pullrefresh).pullRefresh().endPullupToRefresh(addNum == rowsTotal); 
					getOrderList();
				}, 1500);
			}
			/**
			 * 下拉刷新具体业务实现
			 */
			function pulldownRefresh() {
				setTimeout(function() {
					//重新加载页面
					location.reload();
					mui(#pullrefresh).pullRefresh().endPulldownToRefresh();
				}, 1500);
			}
			
			function add(data) {
				rowsTotal = data.total;
				if (addNum >= rowsTotal) {
					addNum = rowsTotal;
				}
				addNum += data.orderInfo.length;
				var table = document.body.querySelector(.mui-table-view);
				var cells = document.body.querySelectorAll(.mui-table-view-cell);
				
				for (i = 0; i < data.orderInfo.length; i++) {
					var li = document.createElement(li);
					li.className = mui-table-view-cell mui-media;
					li.innerHTML =data.orderInfo[i].goodsName;
					table.appendChild(li);
				}
			}
		</script>
	</body>