MUI 框架之移动端前端开发对 dialog 与 button 轮播的深入运用与实战

作者：黎燃

2022-11-09
内蒙古
本文字数：2276 字
阅读完需：约 7 分钟

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）显示。

messageType: String 提示对话框上显示的内容 titleType: String 提示对话框上显示的标题 btnValueType: String 提示对话框上按钮显示的内容 callbackType: Function 提示对话框上关闭后的回调函数 typeValue: '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；});

复制代码

发布于: 刚刚阅读数: 2

原文链接:【http://xie.infoq.cn/article/83a9b65f14a2799a07ee5a63e】。文章转载请联系作者。

黎燃

关注

前端工程师 2022-05-06 加入

专注学习分享前端知识。

发布

暂无评论

创作场景

MUI 框架之移动端前端开发对 dialog 与 button 轮播的深入运用与实战

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

2、 UI 组件

2.1 button（按钮）

2.2 dialog（对话框）

2.3 图片轮播

黎燃

评论

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