为什么选择 MUI
1.极简主义 1.MUI 框架文件大小仅为 108k，而 BootStrap 文件大小为 297k。同时，MUI 提供了 20 多个控件、50 个 JS API 和 100 多种样式 2.速度很快 1、MUI 的 JS 加载速度仅为 17 毫秒，体积小，加载速度快，页面绘制快，预加载，快速过渡，立即打开窗口，下拉刷新，区域滚动，原生实现，元素抖动告别 3.非常简单 1.当 HbuilderX 在工厂设置时，内置 MUI 框架，提供快速的代码操作，如更改时观看、模拟器调试和模拟器同步调试。
switch
mui 提供开关控制。单击并滑动以操作开关控件。界面如下：
带有开/关文本提示的默认开关控件以绿色背景打开。基本类是。mui 开关，。mui 开关手柄。DOM 结构如下：
<div class="mui-switch"> <div class="mui-switch-handle"></div></div>
复制代码
事件
当开关控制在打开/关闭状态之间切换时，将触发切换事件。isActive 属性可以确定当前开关状态。通过侦听切换事件，可以在切换期间执行特定的业务逻辑。以下是使用示例：
document.getElementById("mySwitch").addEventListener("toggle",function(event){ if(event.detail.isActive){ console.log("你启动了开关"); }else{ console.log("你关闭了开关"); }})
复制代码
slide
旋转木马组件是 mui 提供的核心组件。基于这个核心组件，我们派生了以下组件：图片传送带、可拖动文本表、可拖动选项卡、可左右滑动的 9 个网格等。这些组件有很多共同点。首先，Dom 结构基本相同，如下所示：
<div class="mui-slider"> <div class="mui-slider-group"> <!--第一个内容区容器--> <div class="mui-slider-item"> <!-- 具体内容 --> </div> <!--第二个内容区--> <div class="mui-slider-item"> <!-- 具体内容 --> </div> </div></div>
复制代码
当拖动切换显示内容时，将触发幻灯片事件。slideNumber 参数可以获取当前显示项的索引（第一项的索引为 0，第二项的索引是 1，依此类推）。通过此事件，您可以在切换显示内容时动态处理一些业务逻辑。下面是一个可拖动选项卡的示例。为了提高页面加载速度，在加载页面时，只显示第一个选项卡的内容，而第二个和第三个标签的内容为空。切换到第二和第三个选项卡时，将动态获取相应的内容以供显示：
var item2Show = false,item3Show = false;//子选项卡是否显示标志document.querySelector('.mui-slider').addEventListener('slide', function(event) { if (event.detail.slideNumber === 1&&!item2Show) { //切换到第二个选项卡 //根据具体业务，动态获得第二个选项卡内容； var content = .... //显示内容 document.getElementById("item2").innerHTML = content; //改变标志位，下次直接显示 item2Show = true; } else if (event.detail.slideNumber === 2&&!item3Show) { //切换到第三个选项卡 //根据具体业务，动态获得第三个选项卡内容； var content = .... //显示内容 document.getElementById("item3").innerHTML = content; //改变标志位，下次直接显示 item3Show = true; }});
复制代码
图像转盘、可拖动图像文本表等可以以相同的方式监视内容更改。例如，我们可以在图像转盘界面上显示当前正在查看的图像：
transparentBar
当用户向下滚动时，标题栏逐渐从透明变为不透明；当用户再次向上滚动时，标题栏将从不透明变为透明。透明标题栏组件相对简单。您只需要添加。mui-bar 透明类到头组件，如以下示例代码所示
<header class="mui-bar mui-bar-nav mui-bar-transparent"> <h1 class="mui-title">标题</h1></header>
复制代码
图片轮播
假设当前图片广播中有 1、2、3 和 4 张图片。从第一张图片开始，向左滑动以切换图片。切换到第四张图片时，继续向左滑动。接下来，有两种效果：支持周期：向左滑动可直接切换到第一张图片；不支持循环：向左滑动，无响应，继续显示第四张图片。要显示第一张图片，用户必须连续向右滑动才能切换到第一张图片；当显示第一张图片时，同样的问题是是否继续向右滑动以显示第四张图片；这个问题的实现需要通过控制。mui 滑块循环类和 DOM 节点；要支持循环，需要添加。mui slider group node 对于多滑块循环类，需要重复添加两张图片，图片顺序更改为：4、1、2、3、4、1。代码示例如下：
<div class="mui-slider"> <div class="mui-slider-group mui-slider-loop"> <!--支持循环，需要重复图片节点--> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="4.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div> <div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div> <!--支持循环，需要重复图片节点--> <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="1.jpg" /></a></div> </div></div>
复制代码
评论