Smartbi V7 帮助中心
页面树结构
转至元数据结尾
转至元数据起始

1 概述

需求：

  1. 制作移动端的POC页面，顶部显示部分固定在页面顶部，尾部菜单部分固定在页面底部，当上下滑动页面时，只有中间两个饼图仪表能自由滑动。
  2. 移动端展示时实现下面菜单部分左右充满。效果如图：


实现思路：

  1. 使用HTML模板布局：见https://history.wiki.smartbi.com.cn/pages/viewpage.action?pageId=21955317
  2. HTML实现顶部和尾部固定定位，中间内容部分绝对定位。

2 实现步骤

  1. 准备基础 HTML 模板（下载： demos.html ）


2.修改以layout开头的布局元素的样式

HTML布局（只支持安卓APP）.html 
<table width="100%" height="100%"  border="0" cellspacing="0" cellpadding="0" valign="top" style="background-image:url(img/1.png);background-repeat:no-repeat;">
	<tr>
		<td>
		<table width="100%" border="0" cellspacing="0" cellpadding="0" valign="top" >
			<tr id = 'paramPanelTr'>
				<td width="100%" colspan="2" align="center" bofid='paramPanel'></td>
			</tr>
		</table></td>
	</tr>
	<tr height="100%">
		<td>
		<div class="_viewdiv" id='_viewdiv_' style="width: 100%; height: 100%; left: 0px; top: 0px; overflow: auto;">
			<table width="100%" height="100%"  cellspacing="0" cellpadding="0" valign="top" >
				<tr height="100%">
					<td width=100% valign="top" bofid="layout0" class="layout_0"></td>
					<td width=100% valign="top" bofid="layout1" class="layout_1"></td>
					<td width=100% valign="top" bofid="layout2" class="layout_2"></td>
				</tr>
			</table>
		</div></td>
	</tr>
</table>
<script type="text/javascript">
  var domutils = jsloader.resolve("freequery.lang.domutils");
  var isMobile = domutils.isMobile();
	//添加设备判断，避免固定定位对PC端显示造成影响
	if(isMobile){
		$(".layout_0").css({
			"width":"100%",
			"height": "54px",
			"position":"fixed",
			"left":0,
			"top": 0,
			"z-index":2,
			"background":"#FFFFFF"
		});
		$(".layout_1").css({
			"width":"100%",
			"height":"auto",
			"position":"absolute",
			"left":0,
			"top": "54px",
			"z-index":1
		});
		$(".layout_2").css({
			"width":"100%",
			"height":"51px",
			"position":"fixed",
			"left":0,
			"bottom": "-5px",
			"z-index":2,
			//通过背景色实现两边充满
			"background":"#0E63AF"
		});
	}
</script>

3.Android APP上查看效果