apicloud 底部導航

時間 2019-11-12

標籤 apicloud 底部導航简体版

原文原文鏈接

最近纔開始接觸apicloud ,確認有點落伍的感受。照抄了官方的底部導航的例子，一會兒強迫症來了，改進一下：javascript

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。