waibao
/
NN2022100801


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
							<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>首页</title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				background-color: #efeff4;
			}
			
			.title {
				margin: 20px 15px 10px;
				color: #6d6d72;
				font-size: 15px;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="title">
				<p>这是使用nativeObj 原生控件绘制的底部选项卡示例，当前为父页面，显示第一个tab项内容；</p>
				<p>这里采用将第一个tab项内容放在父页面显示，因为是入口页面，会在启动中进行渲染，使首页显示速度更快</p>
				<p>选项卡常用于App首页，为加快渲染，原生底部选项卡是在manifest.json中通过plus -> launchwebview -> subNViews 节点配置的；</p>
				<p>选项卡图标使用字体绘制，点击可切换对应选项卡的高亮状态，开发者可自定义相应的点击事件；</p>
				<p>本示例中，点击第二个选项卡打开一个支持下拉刷新的webview；点击第四个选项卡，打开一个新窗口。</p>
				
				<p>中间悬浮大球图标，因涉及屏幕分辨率动态计算，目前是在首页plusReady事件中实现绘制的。该悬浮大球支持点击事件，开发者可定制实现对应的点击逻辑。</P>
					
				<p>为提高性能，本示例选项卡图标全部使用字体文件绘制（推荐），实际使用中也可以使用图片绘制。</p>
			</div>
		</div>
		
		<script src="js/util.js"></script>
		<script type="text/javascript">
			var aniShow = {};
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			mui.plusReady(function() {
				var self = plus.webview.currentWebview(),
					nviews = self.getSubNViews(),
					subpages = util.options.subpages,
					leftPos = Math.ceil((window.innerWidth - 60) / 2); // 设置凸起大图标为水平居中

				/**	
				 * drawNativeIconBg 绘制带边框的半圆，
				 * 实现原理：
				 *   id为bg的tag 创建带边框的圆
				 *   id为bg2的tag 创建白色矩形遮住圆下半部分，只显示凸起带边框部分
				 *   注意创建先后顺序，创建越晚的层级越高
				 */
				var drawNativeIconBg = util.drawNative('iconBg', {
					bottom: '5px',
					left: leftPos + 'px',
					width: '60px',
					height: '60px',
					position: 'dock'
				}, [{
					tag: 'rect',
					id: 'bg',
					position: {
						top: '0px',
						left: '0px',
						width: '100%',
						height: '100%'
					},
					rectStyles: {
						color: '#fff',
						radius: '30px',
						borderColor: '#ccc',
						borderWidth: '1px'
					}
				}, {
					tag: 'rect',
					id: 'bg2',
					position: {
						bottom: '0px',
						left: '0px',
						width: '100%',
						height: '45px'
					},
					rectStyles: {
						color: '#fff'
					}
				}]);

				/**
				 * 凸起图标最后创建  浮在最顶层
				 *	id为iconBg的红色背景图
				 * 	id为icon的字体图标
				 * 	
				 */
				var drawNativeIcon = util.drawNative('tabIcon', {
					bottom: '10px',
					left: leftPos + 5 + 'px',
					width: '50px',
					height: '50px',
					position: 'dock' //此种停靠方式表明该控件应浮在窗口最上层，以免被其他窗口遮住
				}, [{
					tag: 'rect',
					id: 'iconBg',
					position: {
						top: '0px',
						left: '0px',
						width: '50px',
						height: '100%'
					},
					rectStyles: {
						color: '#d74b28',
						size: '50px',
						radius: '50%'
					}
				}, {
					tag: 'font',
					id: 'icon',
					text: '\ue600', //此为字体图标Unicode码'\e600'转换为'\ue600'
					position: {
						top: '0px',
						left: '0px',
						width: '50px',
						height: '100%'
					},
					textStyles: {
						fontSrc: '_www/fonts/iconfont.ttf',
						align: 'center',
						color: '#fff',
						size: '30px'
					}
				}]);
				// append 到父webview中
				self.append(drawNativeIconBg);
				self.append(drawNativeIcon);

				//自定义监听图标点击事件
				drawNativeIcon.addEventListener('click', function(e) {
					mui.alert('你点击了图标，你在此可以打开摄像头或者新窗口等自定义点击事件。', '悬浮球点击事件');
					// 重绘字体颜色
					drawNativeIcon.drawText('\ue600', {}, {
						fontSrc: '_www/fonts/iconfont.ttf',
						align: 'center',
						color: '#000',
						size: '30px'
					}, 'icon');
				});
				
				//创建子webview窗口 并初始化
				util.initSubpage();
				var activePage = plus.webview.currentWebview();

				//给每个view 添加监听点击切换
				for(var i = 0; i < 4; i++) {
					nviews[i].addEventListener('click', clickEvent, false);
				}

				// 自定义 tab 点击事件
				function clickEvent(e) {
					var currId = e.target.id,
						currIndex = parseInt(currId.substr(currId.length - 1, 1) - 1),
						currView = self.getStyle().subNViews[currIndex];
						
					// 匹配对应tab窗口	
					if(currIndex > 0){
						targetPage = plus.webview.getWebviewById(subpages[currIndex-1]);						
					}else {
						targetPage = plus.webview.currentWebview();
					}

					if(targetPage == activePage) {
						return;
					}

					if(currIndex !== 3) {
						//底部选项卡切换
						util.toggleNview(currView, currIndex);
						// 子页面切换
						util.changeSubpage(targetPage, activePage);
						//更改当前活跃的页面
						activePage = targetPage;
					} else {
						//第四个tab 打开新窗口
						var newWV = plus.webview.create('html/new-webview.html', 'new');
						newWV.show('slide-in-right', 200);
					}
				}
			});
		</script>
	</body>

</html>