MUI学习之路---了解MUI，MUI的第一个项目和页面的跳转

最新推荐文章于 2023-11-25 22:34:44 发布

牛总来学习了

最新推荐文章于 2023-11-25 22:34:44 发布

阅读量3.9k

点赞数 3

分类专栏： MUI

本文链接：https://blog.csdn.net/qq_57480977/article/details/126478078

版权

学习 javascript 前端

MUI 专栏收录该内容

1 篇文章 2 订阅

订阅专栏

MUI

MUI概述：

MUI是一款APP的前端框架
进入官网可以浏览更加全面的API

MUI官网

特点：
追求性能体验，是启动MUI项目的首要目标，轻量必然是重要特征；
MUI不依赖任何第三方JS库，压缩后的JS和CSS文件仅有100+K和60+K

第一个MUI项目：

打开HBuilder，右键新建项目选择APP，选择带有mui项目的模板就可以生成第一个mui项目
在这里插入图片描述
创建好后自动生成一些文件

打开首页后里面自动为我们导入了对应的css文件和js文件。

官网：顶部标题栏是每个页面都必需的内容，在Hbuilder中输入mheader，可以快速生成顶部导航栏。
根据官网的提示，我们输入输入mheader后，可以生成一个带有箭头的头部信息

<!--
	声明头部栏mui-bar
	头部栏是一个导航形式mui-bar-nav			
-->
<header class="mui-bar mui-bar-nav">
	<!--
		mui-action-back声明一个后退的样式:
			action行动
			back后退				
	-->
	<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	<h1 class="mui-title">标题</h1>
</header>

在这里插入图片描述
生成头部导航后，我们继续输入下列代码：

<!--
	mui-bar声明底部栏
	mui-bar-tab底部栏是一个表格形式
	
-->

<footer class="mui-bar mui-bar-tab">
	<a class="mui-tab-item mui-active" id="home">
		<span class="mui-icon mui-icon-home"></span>
		<span class="mui-tab-label">首页</span>
	</a>
	<a class="mui-tab-item mui-active" id="phone">
		<span class="mui-icon mui-icon-phone"></span>
		<span class="mui-tab-label">电话</span>
	</a>
	<a class="mui-tab-item mui-active">
		<span class="mui-icon mui-icon-email"></span>
		<span class="mui-tab-label">邮件</span>
	</a>
	<a class="mui-tab-item mui-active">
		<span class="mui-icon mui-icon-gear"></span>
		<span class="mui-tab-label">设置</span>
	</a>

</footer>

生成一个底部导航栏。
在这里插入图片描述
从上面代码可以了解到几个标签的含义：

mui-bar：意为声明一个导航栏，-后面的不同参数，决定了其位置和定位的不同
- nav表示以单个形式出现的导航多为头部
  - mui-bar-tab中每一项的标签需要有mui-tab-item的声明
- tab表示以表格形式出现的导航多为底部
  导航中有的照片信息时MUI里自带的，比如我们创建的底部栏并没有导入图片，却有不同的图标

接下来我们创建一个简单的折叠面板：

<!--
	折叠面板
-->
<ul class="mui-table-view">
	<li class="mui-table-view-cell mui-collapse">
		<a class="mui-navigate-right" href="#">面板1</a>
		<div class="mui-collapse-content">
			<p>面板1子内容</p>
		</div>
	</li>
</ul>

可以发现，并没有出现对应的页面，是因为mui-bar标签声明的都为固定定位，会将一部分内容遮挡，官网也给我出们提示：

官网：除顶部导航、底部选项卡两个控件之外，其它控件都建议放在.mui-content控件内，在Hbuilder中输入mbody，可快速生成包含.mui-content的代码块。
所以切记，所有的内容一定要放进mui-content标签中也就是我们输入mbody生成的代码块中

<div class="mui-content">

	<!--
		折叠面板
	-->
	<ul class="mui-table-view">
		<li class="mui-table-view-cell mui-collapse">
			<a class="mui-navigate-right" href="#">面板1</a>
			<div class="mui-collapse-content">
				<p>面板1子内容</p>
			</div>
		</li>
	</ul>
</div>

在这里插入图片描述

页面跳转：

由于mui框架屏蔽了onclick和href事件。所以不能用常规的a标签和onclick点击事件来跳转，只能来绑定监听事件来实现，

参考:
页面跳转

个人喜欢用第三种

示例：
首先创建一个新的html页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>这是phone</h1>
	</body>
</html>

实现点击电话按钮，跳转到新html页面中：

html：
	<a class="mui-tab-item mui-active" id="phone">
		<span class="mui-icon mui-icon-phone"></span>
		<span class="mui-tab-label">电话</span>
	</a>
js：
<script type="text/javascript" charset="utf-8">
	mui.init();
	document.getElementById("phone").addEventListener("tap",function(){
		mui.openWindow("phone.html","ID");
	})
</script>