apicloud 底部导航

最新推荐文章于 2022-11-03 10:55:17 发布

weixin_33968104

最新推荐文章于 2022-11-03 10:55:17 发布

阅读量491

点赞数 1

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/436211/blog/908440

版权

2019独角兽企业重金招聘Python工程师标准>>>

最近才开始接触apicloud ,确认有点落伍的感觉。照抄了官方的底部导航的例子，一下子强迫症来了，改进一下：

<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>AUI快速完成布局</title>
	<link rel="stylesheet" type="text/css" href="../css/aui.css" />
</head>

<body>
	<header class="aui-bar aui-bar-nav aui-bar-dark">顶部导航栏</header>
	<footer class="aui-bar aui-bar-tab">
		<div class="aui-bar-tab-item aui-active" tapmode>
			<i class="aui-iconfont aui-icon-home"></i>
			<div class="aui-bar-tab-label" url="setting.html">首页</div>
		</div>
		<div class="aui-bar-tab-item" tapmode>
			<i class="aui-iconfont aui-icon-star"></i>
			<div class="aui-bar-tab-label" url="device.html">收藏</div>
		</div>

	</footer>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-tab.js"></script>
<script type="text/javascript">
	var headerDom = $api.dom('header');
	var footerDom = $api.dom("footer");

	var tabFrames = [];
	$api.domAll(footerDom, ".aui-bar-tab-label").forEach(function(element) {
		tabFrames.push({
			name: $api.text(element),
			url: $api.attr(element, "url")
		});
	}, this);

	apiready = function() {
		api.parseTapmode();
		// $api.fixStatusBar(headerDom);
		api.openFrameGroup({
			name: 'group1',
			index: 0,
			preload: 3,
			rect: {
				x: 0,
				y: $api.offset(headerDom).h,
				w: 'auto',
				h: api.winHeight - $api.offset(headerDom).h - $api.offset(footerDom).h
			},
			frames: tabFrames
		}, function(ret, err) {
			$api.text(headerDom, ret.name);
		});
	}

	new auiTab({
		element: footerDom
	}, function(ret) {
		api.setFrameGroupIndex({
			name: 'group1',
			index: ret.index - 1
		});
	});
</script>

</html>

转载于:https://my.oschina.net/u/436211/blog/908440