mui.slide的相关用法

DOM构造结构

<div class="mui-slider">
  <div class="mui-slider-group">
    <!--第一个内容区容器-->
    <div class="mui-slider-item">
      <!-- 具体内容 -->
    </div>
    <!--第二个内容区-->
    <div class="mui-slider-item">
      <!-- 具体内容 -->
    </div>
  </div>
</div>

1.启用右滑关闭功能

mui.init({
        swipeBack: true //启用右滑关闭功能
    });

2.设置轮播时间

var slider = mui("#slider");
    slider.slider({
        interval: 2000 //轮播时间
    });

3.跳转到某个Item

slider.slider().gotoItem(0)

4.上一个轮播

slider.prevItem();  

5.下一个轮播

slider.nextItem();  

6.当前所处位置

slider.getSlideNumber();  

7.禁用/开启滑动切换

slider.stopped = false; //开启滑动切换  
slider.stopped = true; //关闭滑动切换  

8.获得当前显示项的索引

event.detail.slideNumber===1

9.官网示例（mui官方文档）
如下为一个可拖动式选项卡示例，为提高页面加载速度，页面加载时，仅显示第一个选项卡的内容，第二、第三选项卡内容为空。

当切换到第二、第三个选项卡时，再动态获取相应内容进行显示：

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