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