基于手机端的web开发-----商场中人气商品flowView的实现

本文介绍了一个移动端Web应用的实现过程，包括HTML5元标签配置、响应式设计、使用jQuery及自定义JavaScript进行交互控制等内容。文章通过具体示例展示了如何构建具有良好用户体验的Web应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

模板文件test.html:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="apple-mobile-web-app-title" content="天旺库购">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no">

<link rel="apple-touch-icon-precomposed" href="images/ic_launcher.png">
<link rel="apple-touch-icon-precomposed" href="images/ic_launcher.png"
	sizes="72x72">
<link rel="apple-touch-icon-precomposed" href="ic_launcher114x114.png"
	sizes="114x114">
<link rel="apple-touch-icon-precomposed" href="ic_launcher144x144.png"
	sizes="144x144">

<link rel="apple-touch-startup-image" href="images/startpage.png"
	media="screen and (max-device-width: 320px)" />
<link rel="apple-touch-startup-image"
	href="images/startpage768x1004.png" sizes="768x1004"
	media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
<link rel="apple-touch-startup-image" href="images/startpage640x920.png"
	sizes="640x920"
	media="screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)">

<script type="text/javascript" src="scripts/jquery-2.0.3.js"></script>
<script type="text/javascript" src="scripts/iscroll.js"></script>
<script type="text/javascript" src="scripts/topbar.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
<script type="text/javascript" src="scripts/global.js"></script>
<script type="text/javascript" src="scripts/longtu.js"></script>
<script type="text/javascript" src="scripts/tabcontrol.js"></script>
<script type="text/javascript" src="scripts/flowview.js"></script>
<script type="text/javascript" src="scripts/flashad.js"></script>
<script type="text/javascript" src="scripts/member_core.js"></script>
<link rel="stylesheet" href="styles/tianwang.css" />
<link rel="stylesheet" href="styles/flowview.css" />
<link rel="stylesheet" href="styles/add2home.css">
<link rel="stylesheet" href="styles/scrollbar.css">
<link rel="stylesheet" href="styles/jquery-ui-1.10.2.custom.min.css">
<script type="application/javascript" src="scripts/add2home.js"></script>
<script>
	window.scrollTo(0, 0);
	if (window.screen.height == 568) { // iPhone 4
		document.querySelector("meta[name=viewport]").content = "width=320.1";
	}
	if (!window.navigator.standalone) {
	}

	$(document).ready(function() {
		var pageName = Application.PAGE_TEST_BASE;
		var t = $app.getUrlParam(window.location.href, "p");
		if (t != null && t != "") {
			pageName = t;
		}
		$(document.body).height($(document).innerHeight() - 1);
		$app.showPage(pageName);
	});
</script>
</head>
<body>
	<div id="product_hot_content" style="width:100%;height:100%"></div>
</body>
</html>

test_base.js文件:

function Hotproduct_loaded(){

	var query = {
		m: 'get.mainhotproduct',
		storeid: 10,
		pageSize: 15,
		pageIndex: 1,
		md: 'Product',	
	
	};
	
	var opts = {
		m: 'get.mainhotproduct',
		pageObj: this,
		container: $("#hot_flowview_container"),
		templateUrl: "b?f=t_pHot",
		columnCount: 3,
		autoInit: true,
		nodataImg: "images/no_data_product.png",
		nodataMsg: "对不起，没有数据",
		adapter: HotProductAdapter,
		//scrollHandler: "homescrollhandler",
	};
	
   return	new FlowView(opts, query);
	
}

function HotProductAdapter(){
	var adapter = new BaseFlowAdapter();
	adapter.applyData = function(flowView, uiItem){
		var root = uiItem.element;
		var dataObj = uiItem.data;
	    //debugger;
		//img
		var imgDiv = root.children("div").eq(0);
		var imgWidth = uiItem.column.width - 6;
		var imgHeight = imgWidth * dataObj.picHeight / dataObj.picWidth;
		
		var $img = imgDiv.children("img");
		$img.css("width", imgWidth + "px");
		$img.css("height", imgHeight + "px");
		var picUrl = $app.getImage(dataObj.pic, imgWidth);
		$img.attr("src", picUrl);
		
		//text
		var textDiv = root.children("div").eq(1);
		var $price_Org = textDiv.children("div").eq(0).children("div").eq(0).children("div").eq(1).children("span").eq(1);
		$price_Org.html(dataObj.price_Org);
		var $countOfFollow = textDiv.children("div").eq(0).children("div").eq(1).children("div").eq(0);
		$countOfFollow.html(dataObj.countOfFollow);
		
		uiItem.element.bind("click", function(){
			$app.showPage(Application.PAGE_PRODUCT_DETAIL, {
				id: uiItem.data.id}, true);
		});
	};
	
	return adapter;
}

Hotproduct_loaded();

test_base.html文件：

<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>首页</title>
<script src="scripts/jquery-2.0.3.js" type="text/javascript"></script>
<script src="scripts/app.js" type="text/javascript"></script>
<script src="scripts/topbar.js" type="text/javascript"></script>
<script src="scripts/longtu.js" type="text/javascript"></script>
<script src="scripts/tabcontrol.js" type="text/javascript"></script>
<script src="scripts/flashad.js" type="text/javascript"></script>
<script src="scripts/flowview.js" type="text/javascript"></script>
<link href="styles/flowview.css" rel="stylesheet" />
<link href="styles/tianwang.css" rel="stylesheet" />
</head>
<body>
	<div class="tabContainer_01">

		 <div id="home_tab_container_01" class="tabContainer_01" style="width:100%;height:100%;" > 
			<div id="hot_flowview_container" style="width:100%;height:100%;padding-bottom: 10px;"></div>
		</div>
		
	</div>	 
	
  <script src="scripts/test_base.js" type="text/javascript"></script> 
	 
</body>
</html>

控件布局文件t_pHot.html:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>店铺内商品列表</title>
</head>
<body>
	<div class="boxCont">
	
		<div class="img_item_div">
			<img class="img_item" />
		</div>

		<div class="text_contaner" style="overflow:hidden;">
			<div class="line">
				<div class="money_parent">
					<div class="money money_left" />
				
					<div class="money money_middle">
						<span>￥</span><span></span>
					</div>
					
					<div class="money money_right" />
				</div>
				<div class="like_parent">
					<div class="like_text"></div>
					<div class="like_img" />
				</div>
			</div>
		</div>
	</div>
</body>
</html>

flowView效果展示：