MUI从入门到项目实战（十一）（MUI组件之scroll、slide、switch）

一、scroll

 在App开发中，div区域滚动的需求是普遍存在的，但系统默认实现又有如下问题：

• Android平台4.0以下不支持div滚动
• Android平台4.0以上支持div滚动，但不显示滚动条
• 弹出层的div滚动在iOS平台存在事件透传的问题

因此，mui额外提供了区域滚动组件，使用时需要遵循如下DOM结构

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

区域滚动组件默认为absolute定位，全屏显示；在实际使用过程中，需要手动设置滚动区域的位置（top和height）
若使用区域滚动组件，需手动初始化scroll控件
*常用配置项:

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

滚动到底部位置

滚动到顶部的代码比较容易实现,坐标值设为0、0即可；但滚动到底部，需要计算该区域的实际高度，因此mui封装了scrollToBottom方法。

横向滚动

横向滚动只需在scroll组件基础上添加mui-slider-indicatorcode mui-segmented-control mui-segmented-control-inverted这三个class即可.(给子元素添加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>

二、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>

当拖动切换显示内容时，会触发slide事件，通过该事件的detail.slideNumber参数可以获得当前显示项的索引（第一项索引为0，第二项为1，以此类推），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。
如下为一个可拖动式选项卡示例，为提高页面加载速度，页面加载时，仅显示第一个选项卡的内容，第二、第三选项卡内容为空。
当切换到第二、第三个选项卡时，再动态获取相应内容进行显示

<div class="mui-content mui-scroll-wrapper" id="dialogDemo">
    <div class="mui-slider">
        <div class="mui-slider-group">
            <!--第一个内容区容器-->
            <div class="mui-slider-item">
                <!-- 具体内容 -->
                内容一
            </div>
            <!--第二个内容区-->
            <div class="mui-slider-item">
                <!-- 具体内容 -->
                内容二
            </div>
        </div>
    </div>
    <script type="text/javascript">
        (function() {
            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;
                }
            });
        })()
    </script>
</div>

三、switch

mui提供了开关控件，点击滑动两种手势都可以对开关控件进行操作

                    

默认开关控件,带on/off文字提示，打开时为绿色背景，基本class类为.mui-switch、.mui-switch-handle，DOM结构如下：

<div class="mui-switch">
  <div class="mui-switch-handle"></div>
</div>

若希望开关默认为打开状态，只需要在.mui-switch节点上增加.mui-active类即可，如下：

<div class="mui-switch mui-active">
  <div class="mui-switch-handle"></div>
</div>

若希望隐藏on/off文字提示，变成简洁模式，需要在.mui-switch节点上增加.mui-switch-mini类，如下：

<div class="mui-switch mui-switch-mini">
  <div class="mui-switch-handle"></div>
</div>
<!-- 简洁模式开关打开状态 -->
<div class="mui-switch mui-switch-mini mui-active">
  <div class="mui-switch-handle"></div>
</div>

mui默认还提供了蓝色开关控件，只需在.mui-switch节点上增加.mui-switch-blue类即可，如下：

<!-- 蓝色开关关闭状态 -->
<div class="mui-switch mui-switch-blue">
  <div class="mui-switch-handle"></div>
</div>
<!-- 蓝色开关打开状态 -->
<div class="mui-switch mui-switch-blue mui-active">
  <div class="mui-switch-handle"></div>
</div>

若要获得当前开关状态，可通过判断当前开关控件是否包含.mui-active类来实现，若包含，则为打开状态，否则即为关闭状态；如下为代码示例：

var isActive = document.getElementById("mySwitch").classList.contains("mui-active");
if(isActive){
  console.log("打开状态");
}else{
  console.log("关闭状态");  
}

若使用js打开、关闭开关控件，可使用switch插件的toggle()方法，如下为示例代码：

mui("#mySwitch").switch().toggle();

开关控件在打开/关闭两种状态之间进行切换时，会触发toggle事件,通过事件的detail.isActive属性可以判断当前开关状态。可通过监听toggle事件，可以在开关切换时执行特定业务逻辑。如下为使用示例：

document.getElementById("mySwitch").addEventListener("toggle",function(event){
  if(event.detail.isActive){
    console.log("你启动了开关");
  }else{
    console.log("你关闭了开关");  
  }
})