为什么选择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>