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張圖片，圖片順序變爲：四、一、二、三、四、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，以此類推），利用該事件，可在顯示內容切換時，動態處理一些業務邏輯。

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

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