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("你關閉了開關");  
  }
})