兼容低版本安卓电视，使用原生html配合jquery开发H5+app，实现底部导航栏功能

命不息学不止

已于 2024-05-08 15:12:21 修改

阅读量154

点赞数 3

文章标签： android html jquery

于 2024-05-08 15:12:02 首次发布

本文链接：https://blog.csdn.net/atanming1/article/details/138572962

版权

需求：为了在低版本安卓电视机内展示app，而H5的mui框架底部导航栏无法响应遥控器的点击事件，所以页面需求需要使用原生开发。

实际效果：

代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<script src="./js/jquery-3.7.1.js"></script>
		<style type="text/css">
			body {
				position: relative;
				width: 100vw;
				height: 100vh;
				margin: 0;
			}

			.buttom_nag {
				width: 100vw;
				height: 7vh;
				position: fixed;
				bottom: 0;
				left: 0;
				display: flex;

			}

			.card {
				width: 33.3vw;
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

			}

			.content_page {
				width: 100vw;
				height: 93vh;
			}

			img {
				width: 20px;
				height: 20px;
			}

			p {
				margin: 0;
				padding: 0;
				font-size: 12px;
				color: #c3c3c3;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(function() {
				// 页面初始化切换
				changeTap("#instance", "./img/tab_icon/daohanglantubiao_yingxiao_blue.png", "#1296db")
				// 页面切换
				$("#instance").click(function() {
					$("#iframePage").attr("src", "./view/InstantBoard.html");
					changeTap("#instance", "./img/tab_icon/daohanglantubiao_yingxiao_blue.png", "#1296db")
				});
				$("#movement").click(function() {
					$("#iframePage").attr("src", "./view/movementBoard.html");
					changeTap("#movement", "./img/tab_icon/daohanglantubiao_tongji_blue.png", "#1296db")
				});
				$("#record").click(function() {
					$("#iframePage").attr("src", "./view/processingRecord.html");
					changeTap("#record", "./img/tab_icon/daohanglantubiao_wuyefuwu_blue.png", "#1296db")
				});
			})
			var TagIdList = [{
				id: '#instance',
				img: "./img/tab_icon/daohanglantubiao_yingxiao.png"
			}, {
				id: '#movement',
				img: "./img/tab_icon/daohanglantubiao_tongji.png"
			}, {
				id: '#record',
				img: "./img/tab_icon/daohanglantubiao_wuyefuwu.png"
			}, ];
			// 页面切换改变样式
			function changeTap(id, img, col) {
				$(id).find("img").attr("src", img);
				$(id).find("p")[0].style.color = col;
				TagIdList.forEach(it => {
					if (it.id !== id) {
						$(it.id).find("img").attr("src", it.img);
						$(it.id).find("p")[0].style.color = '#c3c3c3';
					}
				})

			}
			// app使用
			document.addEventListener('plusready', function() {
				//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
			});
		</script>
	</head>
	<body>
		<div class="content_page">
			<!-- 不用tab对应页面用iframe进行切换 -->
			<iframe frameborder="0" scrolling="yes" style="width:100%;height:100%" src="./view/InstantBoard.html"
				id="iframePage"></iframe>
		</div>
		<div class="buttom_nag">
			<div class="card" id="instance">
				<div> <img src="./img/tab_icon/daohanglantubiao_yingxiao.png" alt="" id="img1" /> </div>
				<p>A看板</p>
			</div>
			<div class="card" id="movement">
				<div> <img src="./img/tab_icon/daohanglantubiao_tongji.png" alt="" /> </div>
				<p>B看板</p>
			</div>
			<div class="card" id="record">
				<div> <img src="./img/tab_icon/daohanglantubiao_wuyefuwu.png" alt="" /> </div>
				<p>C统计</p>
			</div>
		</div>
	</body>
</html>