H5+mui小白

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

一颗前端子

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

阅读量555

点赞数 1

分类专栏： ui

本文链接：https://blog.youkuaiyun.com/qq_43408070/article/details/111151700

版权

ui 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了使用mui框架构建页面的过程，包括头部导航栏的设置、按钮加载效果的实现、列表点击高亮、表单操作、遮罩层、进度条和弹出选择列表组件等。同时，还探讨了页面间的数据传递和关闭方法，为初学者提供了全面的实践指导。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学之新建项目

在这里插入图片描述

mui结构目录如下

在这里插入图片描述

新建一个页面

demo

在这里插入图片描述

注意事项

在这里插入图片描述

	<header class="mui-bar mui-bar-nav ">
		<!-- 是否有返回按钮就是这个代码 -->
		<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
		<!-- 标题的文字 -->
		<h1 class="mui-title">hello</h1>
	</header>
<!-- 整体的body -->
	<div class="mui-content">
		
	</div>

按钮

前往button的mui处

在这里插入图片描述
之前点击一直都没有加载的样式，但是代码是直接复制的，继续往下看少了：

<button type="button" data-loading-icon="mui-spinner mui-spinner-custom" class="mui-btn mui-btn-primary">确认</button>

<script type="text/javascript">
			mui(document.body).on('tap', '.mui-btn', function(e) {
				mui(this).button('loading');
				setTimeout(function() {
					mui(this).button('reset');
				}.bind(this), 2000);
			});
</script>

点击列表高亮官方文档的实现不了
/点击变蓝色高亮/
.mui-table-view-cell a.mui-navigate-right.mui-active{
background-color: #0062CC;
}
这段代码能够实现