apicloud 底部导航

原创
2017/05/24 20:45
阅读数 4K

最近才开始接触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>

展开阅读全文
加载中
点击加入讨论🔥(1) 发布并加入讨论🔥
打赏
1 评论
0 收藏
1
分享
返回顶部
顶部