h5 - mui 使用技巧

最新推荐文章于 2025-04-28 13:19:10 发布

置二

最新推荐文章于 2025-04-28 13:19:10 发布

阅读量1.7k

点赞数

分类专栏： h5开发文章标签： h5

本文链接：https://blog.youkuaiyun.com/weixin_42675488/article/details/89670237

版权

h5开发专栏收录该内容

1 篇文章

订阅专栏

学习文献
mui 官网	1、包含 mui 等开发大佬（学习）；
	2、登录页、注册页方法；
	——
tomact服务器大佬	简书大佬，js 可以学习（懒加载）；
Hybrid介绍叶小钗大佬

开始进军h5开发，不断学习。

<script type="text/javascript">
	mui.init({
		subpages: [{ // 打开子页面,为解决低端机不流畅的问题
			url: 'index.html',
			id: 'index.html', // 可自定义
			styles: {
				// 更改子页面的样式

			}
		}];
		// 页面预加载:
		preloadPages: [{
			url: 'index.html',
			id: 'index.html',
		}]
	});
	mui.plusReady(function() { // 页面初始化
		// 2、在原生mui组件中跳转,需要找到id做跳转事件
		// tab 为跳转事件方式
		document.getElementById('#opentals').addEventListener('tab', function() {
			mui.openWindow({
				url: 'index.html',
				id: 'index.html'
			})
		})

		// 1.1 、页面接收传参,键值对关系
		var statData = plus.webview.currentWebview(); //拿到对象
		mui.toast(statData.name) //弹出 张三
		// 输出到页面
		var name1 = mui('#name');
		name1[0].innerHTML = statData.name;
	});
	
	//1、自定义页面跳转（按钮元素，a标签）, openTals 为点击事件函数;   在 原生mui组件中使用效果并不理想
	// <button type="button" οnclick="openTals();" ></button>
	function openTals() {
		mui.openWindow({
			url: 'index.html',
			id: 'index.html',
			show: {}, // 是否显示动画
			extras: { // 传递值,键值对
				name: '张三',
				/* 姓名： <span id="name"></span> */
			}
		})
	}
</script>

坑货mui，那么多坑！！！浪费我五一两天的时间就做了app连接到手机和tab底部导航现实的问题！一度怀疑自己的智商是不是出了问题

mui的坑有很多，而我才刚刚爬，且爬且珍惜！

先说tab导航栏重复加载的问题吧：

这个坑也是很无语，在index.html 里不能出现这个页面，因为这是app的启动页！！！

好坑啊。。。

好想找个厕所哭

解决的办法就是a标签上不引用，在底部导航的a标签中跳转到不同的页面，就行了！！！

并且百度的也有很多坑的博客，无力吐槽了，记录下来自己用吧
在这里插入图片描述
正确方法：

<!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>
		<link href="./css/mui.min.css" rel="stylesheet" />
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">标题</h1>
		</header>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active" href="html/a.html">
				<span class="mui-icon mui-icon-home"></span>
				<span class="mui-tab-label">首页</span>
			</a>
			<a class="mui-tab-item" href="html/b.html">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">电话</span>
			</a>
			<a class="mui-tab-item" href="html/c.html">
				<span class="mui-icon mui-icon-star"></span>
				<span class="mui-tab-label">功能</span>
			</a>
		</nav>


		<script src="./js/mui.min.js"></script>
		<script type="text/javascript" charset="utf-8">
			//底部选项卡切换跳转
			(function() {
				var subpages = ['html/a.html','html/b.html', 'html/c.html'];

				var subpage_style = {
					top: '40px',
					bottom: '51px'
				};

				//创建子页面，首个选项卡页面显示，其它均隐藏；
				mui.plusReady(function() {

					var self = plus.webview.currentWebview();
					for (var i = 0; i < subpages.length; i++) { // 如果i等于所有的子页面的话，那么子页面的js都会去执行
						var temp = {};
						var sub = plus.webview.create(subpages[i], subpages[i], subpage_style);

						if (i > 0) {
							sub.hide();
						}
						self.append(sub);
					}
				});

				var activeTab = subpages[0];
				//选项卡点击事件
				mui('.mui-bar-tab').on('tap', 'a', function(e) {
					var targetTab = this.getAttribute('href');

					console.log(targetTab)

					if (targetTab == activeTab) {
						return;
					}

					var self = plus.webview.currentWebview();
					var sub = plus.webview.create(targetTab, targetTab, subpage_style);
					self.append(sub);
					//隐藏当前;
					plus.webview.hide(activeTab); //这里应该是关闭页面，不知道隐藏与关闭区别有多大
					//更改当前活跃的选项卡
					activeTab = targetTab;
				});
				//初始化
				mui.init();

			})()
		</script>
	</body>
</html>