框架下载地址

1. 引用文件

<link rel="stylesheet" href="<mui-path>/css/mui.min.css">
<script src="<mui-path>/js/mui.min.js"></script>

2. 首页选项卡 demo

MUI官网 点击下图中的 UI 组件

mui-选项卡.png

复制选项卡组件代码.png

HTML 代码

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active" href="#tabbar">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-chat">
        <span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
        <span class="mui-tab-label">消息</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-contact">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">通讯录</span>
    </a>
    <a class="mui-tab-item" href="#tabbar-with-map">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">设置</span>
    </a>
</nav>

注意

移动端滑动页面时报错:

Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

原因：

由于浏览器必须要在执行事件处理函数之后，才能知道有没有掉用过 preventDefault() ，这就导致了浏览器不能及时响应滚动，略有延迟。

所以为了让页面滚动的效果如丝般顺滑，从 chrome56 开始，在 window、document 和 body 上注册的 touchstart 和 touchmove 事件处理函数，会默认为是 passive: true。浏览器忽略 preventDefault() 就可以第一时间滚动了。

导致浏览器在触发touchstart，touchmove事件的时候，e.preventDefault()会被浏览器忽略掉，并不会阻止默认行为。

解决方案：

1. 注册处理函数时，用如下方式，明确声明为不是被动的
   window.addEventListener('touchmove', fn, { passive: false })
2. 应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。

3. 轮播图 demo

官方文档中选择 UI 组件并选择 gallery 选项

mui-轮播图.jpg

<!-- 轮播图 -->
<div class="mui-slider lt-slider">
    <div class="mui-slider-group mui-slider-loop">
        <!--支持循环，需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
                <img src="./images/banner5.png" />
                <p class="mui-slider-title">幸福就是可以一起睡觉</p>
            </a>
        </div>
        <div class="mui-slider-item">
            <a href="#">
                <img src="./images/banner1.png" />
                <p class="mui-slider-title">幸福就是可以一起睡觉</p>
            </a>
        </div>
        <div class="mui-slider-item">
            <a href="#">
                <img src="./images/banner2.png" />
                <p class="mui-slider-title">幸福就是可以一起睡觉</p>
            </a>
        </div>
        <div class="mui-slider-item"><a href="#"><img src="./images/banner3.png" />
            <p class="mui-slider-title">幸福就是可以一起睡觉</p>
            </a></div>
        <div class="mui-slider-item"><a href="#">
            <img src="./images/banner4.png" />
            <p class="mui-slider-title">幸福就是可以一起睡觉</p>
            </a></div>
        <div class="mui-slider-item"><a href="#">
            <img src="./images/banner5.png" />
            <p class="mui-slider-title">幸福就是可以一起睡觉</p>
            </a></div>
        <!--支持循环，需要重复图片节点-->
        <div class="mui-slider-item mui-slider-item-duplicate">
            <a href="#">
                <img src="./images/banner1.png" />
                <p class="mui-slider-title">幸福就是可以一起睡觉</p>
            </a>
        </div>
    </div>
    <div class="mui-slider-indicator mui-text-right">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
    </div>
</div>
<!-- PS: 类名为 mui-slider-indicator 的 div 在官方文档中未作表述，可通过上一个 demo 进行 copy-->
<!-- /轮播图 -->

效果

mui-轮播图效果.jpg