MUI组件（4）

2019-04-14 本文已影响19人白晓明

slide（轮播组件）

轮播组件是MUI提供的核心组件之一，基于轮播组件衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件。

<!--使用msl快捷生成轮播组件-->
<div class="mui-slider">
  <div class="mui-slider-group">
    <!--第一个内容区容器-->
    <div class="mui-slider-item">
      <!-- 具体内容 -->
    </div>
    <!--第二个内容区-->
    <div class="mui-slider-item">
      <!-- 具体内容 -->
    </div>
  </div>
</div>

提高可拖动式选项卡页面加载速度，页面加载时，仅显示第一个选项卡的内容，后面的在切换时动态获取相应内容进行显示。

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;
  }
});

案例：轮播

gallery（图片轮播）

图片轮播继承自 slide 组件，因此其DOM结构和事件与 slide 组件相同。

<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内置了图片轮播组件，可以通过设定是否自动轮播及轮播周期。

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

//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳转到第index张图片，index从0开始；

注：若轮播组件内容是JS动态生成，则需要在动态生成完整DOM后，手动调用图片轮播的初始化方法。

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

案例：图片轮播

scroll（区域滚动）

<div class="mui-scroll-wrapper">
    <div class="mui-scroll">
        <!--这里放置真实显示的DOM内容-->
    </div>
</div>

注：区域滚动组件默认为 absolute 定位，全屏显示。在使用过程中，需要手动设置滚动区域的位置（top 和 height）。若使用区域滚动组件，需要手动初始化 scroll 组件。

常用配置项：

scroll.options

options = {
 scrollY: true, //是否竖向滚动
 scrollX: false, //是否横向滚动
 startX: 0, //初始化时滚动至x
 startY: 0, //初始化时滚动至y
 indicators: true, //是否显示滚动条
 deceleration:0.0006, //阻尼系数,系数越小滑动越灵敏
 bounce: true //是否启用回弹
}
//初始化scroll组件
mui('.mui-scroll-wrapper').scroll({
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
});

滚动到特定位置

//xpos：要在窗口文档显示区左上角显示文档的x坐标
//ypos：要在窗口文档显示区左上角显示文档的y坐标
//duration：滚动时间周期，单位是毫秒
scrollTo(xpos, ypos, duration)

//快速滚动到该区域顶部
mui('.mui-scroll-wrapper').scroll().scrollTo(0,0,100);//100毫秒滚动到顶

滚动到底部位置

//duration：滚动时间周期，单位是毫秒
scrollToBottom(duration)

横向滚动

横向滚动只需要在 scroll 组件基础上添加 mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted 这三个样式（给子元素添加mui-control-item 可加大文字间距）。

<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
    <div class="mui-scroll">
        <a class="mui-control-item mui-active">
            推荐
        </a>
        <a class="mui-control-item">
            热点
        </a>
        <a class="mui-control-item">
            北京
        </a>
        <a class="mui-control-item">
            社会
        </a>
        <a class="mui-control-item">
            娱乐
        </a>
        <a class="mui-control-item">
            科技
        </a>
    </div>
</div>

横向滚动

offcanvas（侧滑菜单）
MUI提供了两种侧滑导航实现：webview模式和div模式。

webview 模式

主页面和菜单内容在不同的 webview 中，两个页面根据内容需要分别组织DOM结构，其优点如下：
· 菜单内容是单独的 webview，因此可以被复用。
· 菜单区域的滚动不影响主界面，因此可使用原生滚动。
缺点
· 不支持跟随手指拖动。
· 交互需要使用 自定义事件 实现跨 webview 通讯。

div模式

主页面和菜单内容在同一个webview下，嵌套在特定结构的div中，通过div的移动动画模拟菜单移动，优点如下：
· 支持跟随手指拖动；
· 可通过JS轻松实现两者交互。
缺点
· 不支持菜单内容复用；
· div 区域滚动，内容较多会出现卡顿。
div 模式四种动画效果
· 主界面移动、菜单不动

<!-- 主界面移动、菜单不动 -->
<div class="mui-off-canvas-wrap mui-draggable">
  <!-- 菜单容器 -->
  <aside class="mui-off-canvas-left" id="offCanvasSide">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 菜单具体展示内容 -->
            
      </div>
    </div>
  </aside>
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left"  href="#offCanvasSide" ></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
            
      </div>
    </div> 
    <div class="mui-off-canvas-backdrop"></div>
  </div> 
</div>

主界面移动，菜单不动

· 主界面不动，菜单移动

<!-- 主界面不动、菜单移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable mui-slide-in">
  <!-- 菜单容器 -->
  <aside class="mui-off-canvas-left" id="offCanvasSide">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 菜单具体展示内容 -->
        
      </div>
    </div>
  </aside>
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        
      </div>
    </div>  
    <div class="mui-off-canvas-backdrop"></div>
  </div>
</div>

主界面不动，菜单动

· 主界面、菜单同时移动

<!-- 主界面菜单同时移动 -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable">
    <!-- 主页面容器 -->
    <div class="mui-inner-wrap">
        <!-- 菜单容器 -->
        <aside class="mui-off-canvas-left" id="offCanvasSide">
            <div class="mui-scroll-wrapper">
                <div class="mui-scroll">
                    <!-- 菜单具体展示内容 -->
                    
                </div>
            </div>
        </aside>
        <!-- 主页面标题 -->
        <header class="mui-bar mui-bar-nav">
            <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
            <h1 class="mui-title">标题</h1>
        </header>
        <nav class="mui-bar mui-bar-tab">
            <a class="mui-tab-item mui-active">
                <span class="mui-icon mui-icon-home"></span>
                <span class="mui-tab-label">首页</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-phone"></span>
                <span class="mui-tab-label">电话</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-email"></span>
                <span class="mui-tab-label">邮件</span>
            </a>
            <a class="mui-tab-item">
                <span class="mui-icon mui-icon-gear"></span>
                <span class="mui-tab-label">设置</span>
            </a>
        </nav>
        <!-- 主页面内容容器 -->
        <div class="mui-content mui-scroll-wrapper">
            <div class="mui-scroll">
                <!-- 主界面具体展示内容 -->
                
            </div>
        </div>
     <div class="mui-off-canvas-backdrop"></div>
    </div>
</div>

主界面、菜单同时移动

· 缩放式侧滑

<!-- 缩放式侧滑（类手机QQ） -->
<!-- 侧滑导航根容器 -->
<div class="mui-off-canvas-wrap mui-draggable mui-scalable">
  <!-- 菜单容器 -->
  <aside class="mui-off-canvas-left mui-transitioning" id="offCanvasSide">
    <div class="mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 菜单具体展示内容 -->
        
      </div>
    </div>
  </aside>
  <!-- 主页面容器 -->
  <div class="mui-inner-wrap mui-transitioning">
    <!-- 主页面标题 -->
    <header class="mui-bar mui-bar-nav">
      <a class="mui-icon mui-action-menu mui-icon-bars mui-pull-left" href="#offCanvasSide"></a>
      <h1 class="mui-title">标题</h1>
    </header>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
    <div class="mui-content mui-scroll-wrapper">
      <div class="mui-scroll">
        <!-- 主界面具体展示内容 -->
        
      </div>
    </div>  
    <div class="mui-off-canvas-backdrop"></div>
  </div>
</div>

缩放式侧滑

JS API

MUI支持多种方式操作 div 模式的侧滑菜单：

在界面上拖动操作；
点击含有 mui-action-menu 样式的控件；
Android 手机按 menu 键
通过JS API触发

//两种调用方式
mui('.mui-off-canvas-wrap').offCanvas('show');
//或者
mui('.mui-off-canvas-wrap').offCanvas().show();

可调用方法

方法名	作用
`show()`	显示
`close()`	隐藏
`toggle()`	切换

事件监听

事件名	作用
`shown`	显示
`hidden`	隐藏

document.querySelector('.mui-off-canvas-wrap').addEventListener('shown',function (event) {
    //...
})
//可以通过isShown()方法判断是否为显示状态
//其可以传递 direction（方向）参数进而可以判断左右侧滑
mui('.mui-off-canvas-wrap').offCanvas().isShown();

案例：

参考文档

MUI官方文档

上一章	下一章

MUI组件（4）

常用配置项：

滚动到特定位置

滚动到底部位置

横向滚动

webview 模式

div模式

JS API

可调用方法

事件监听

案例：

参考文档

猜你喜欢

热点阅读