MUI - slide（輪播組件）

原文地址：http://www.hcoder.net/tutorials/info_88.html

 

 

 輪播組件是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>

js部分

<script type="text/javascript">
mui.plusReady(function(){
    //獲得slider插件對象
    var gallery = mui('.mui-slider');
        gallery.slider({
          interval:5000//自動輪播周期，若為0則不自動播放，默認為0；
    });
});
</script>

顯示圓點

<div class="mui-slider-indicator">
    <div class="mui-indicator mui-active"></div>
    <div class="mui-indicator"></div>
</div>

輪播循環
若要支持循環，則需要在.mui-slider-group節點上增加.mui-slider-loop類，同時需要重復增加2張圖片，圖片順序變為：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>

輪播跳轉
若要跳轉到第x張圖片，則可以使用圖片輪播插件的gotoItem方法，例如：

var gallery = mui('.mui-slider');
gallery.slider().gotoItem(index);//跳轉到第index張圖片，index從0開始；

輪播事件
當拖動切換顯示內容時，會觸發slide事件，通過該事件的detail.slideNumber參數可以獲得當前顯示項的索引（第一項索引為0，第二項為1，以此類推），利用該事件，可在顯示內容切換時，動態處理一些業務邏輯。

如下為一個可拖動式選項卡示例，為提高頁面加載速度，頁面加載時，僅顯示第一個選項卡的內容，第二、第三選項卡內容為空。
當切換到第二、第三個選項卡時，再動態獲取相應內容進行顯示：

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