mui提供了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格组件，这些组件都用到了mui框架的slide插件，有较多共同点。首先，Dom内容构造基本相同，都必须有一个.mui-slider的父容器；其次，当拖动切换显示内容时，均会触发slide事件（可拖动式选项卡在点击选项卡标题时，也会触发slide事件），通过该事件的detail.slideNumber参数可以获得当前显示项的索引（第一项索引为0，第二项为1，以此类推），利用该事件，可在显示内容切换时，动态处理一些业务逻辑。
如下为一个可拖动式选项卡示例，为提高页面加载速度，页面加载时，仅显示第一个选项卡的内容，第二、第三选项卡内容为空。
<div class="mui-slider">
<!--选项卡标题区-->
<div class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
<a class="mui-control-item" href="#item1">待办公文</a>
<a class="mui-control-item" href="#item2">已办公文</a>
<a class="mui-control-item" href="#item3">全部公文</a>
</div>
<div class="mui-slider-progress-bar mui-col-xs-4"></div>
<div class="mui-slider-group">
<!--第一个选项卡内容区-->
<div id="item1" class="mui-slider-item mui-control-content mui-active">
<ul class="mui-table-view">
<li class="mui-table-view-cell">待办公文1</li>
<li class="mui-table-view-cell">待办公文2</li>
<li class="mui-table-view-cell">待办公文3</li>
</ul>
</div>
<!--第二个选项卡内容区，页面加载时为空-->
<div id="item2" class="mui-slider-item mui-control-content"></div>
<!--第三个选项卡内容区，页面加载时为空-->
<div id="item3" class="mui-slider-item mui-control-content"></div>
</div>
</div>当切换到第二、第三个选项卡时，再动态获取相应内容进行显示：
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;
}
});图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化，比如我们可以在图片轮播界面显示当前正在看的是第几张图片：
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的；
document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片";
});