持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情

1、 使用框架前的准备工作

1.创建包含mui的新HTML文件 在Hbuilder中，创建一个新的HTML文件，然后选择“HTML with mui”模板以快速生成mui页面模板。默认情况下，模板处理mui的js和css资源的引用。 2.输入mheader 每个页面都需要顶部标题栏。在Hbuilder中输入mheader以快速生成顶部导航栏。 3.输入mbody 除了顶部导航和底部选项卡控件外，建议将其他控件放置在中。mui内容控制。您可以快速生成包含的代码块。通过在Hbuilder中输入body来实现mui内容。

2、 UI组件

1.手风琴 折叠式面板类似于次级列表，如下所示：

<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>
<ul class="mui-table-view">
        <li class="mui-table-view-cell mui-collapse">
            <a class="mui-navigate-right" href="#">面板2</a>
            <div class="mui-collapse-content">
                <p>面板2子内容</p>
            </div>
        </li>
    </ul>

2.1 button（按钮）

MUI的默认按钮为灰色。此外，还有五种颜色系统：蓝色、绿色、黄色、红色和紫色。五色系统对应五种场景，即初级、成功、警告、危险和皇家；使用。mui-btn类生成默认按钮。继续添加。mui-btn颜色值或。mui-btn场景生成相应颜色系统的按钮。例如，使用。mui btn蓝色或。mui-btn-primary生成蓝色按钮； “正常”按钮 添加按钮节点多个btn类可以生成默认按钮；如果需要其他颜色的按钮，可以继续添加相应的类。例如mui-btn-blue可以变成蓝色按钮

<button type="button" class="mui-btn">默认</button>
<button type="button" class="mui-btn mui-btn-primary">蓝色</button>
<button type="button" class="mui-btn mui-btn-success">绿色</button>
<button type="button" class="mui-btn mui-btn-warning">黄色</button>
<button type="button" class="mui-btn mui-btn-danger">红色</button>
<button type="button" class="mui-btn mui-btn-royal">紫色</button> 

2.2 dialog（对话框）

创建并显示对话框，弹出的对话框为非阻塞模式，用户点击对话框上的按钮后关闭( h5模式的对话框也可通过 closepopup关闭 )，并通过callback函数返回用户点击按钮的索引值或输入框中的值。 mui将根据ua判断是否会弹出本地对话框或用h5绘制的对话框。默认情况下，本机对话框将在基础中弹出。您可以配置type属性以弹出h5模式对话框 两者之间的区别：1.本机对话框可以跨Web视图，2.h5对话框样式是统一的，可以修改对话框属性或样式 mui v3.0或更高版本的对话框控件支持换行（n）显示。

message Type: String 提示对话框上显示的内容 title Type: String 提示对话框上显示的标题 btnValue Type: String 提示对话框上按钮显示的内容 callback Type: Function 提示对话框上关闭后的回调函数 type Value: 'div' 是否使用h5绘制的对话框

2.3 图片轮播

图片传送带继承自幻灯片插件，因此其DOM结构和事件与幻灯片插件相同； DOM结构 默认情况下，不支持循环。DOM结构如下：

<div class="mui-slider">
  <div class="mui-slider-group">
    <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>
</div>

假设当前图片广播中有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>

注意：默认情况下，mui框架将初始化当前页面的图片转盘组件；如果carousel组件的内容是由js动态生成的（如通过ajax动态获取的营销信息），则需要在动态生成完整的DOM（包括多滑块下的所有DOM结构）后，手动调用图像carousl的初始化方法；代码如下：

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
  interval:5000//自动轮播周期，若为0则不自动播放，默认为0；
});