mui 滑动切换相应内容的js案例

1.首先引入相关css以及js文件

mui.min.css

mui.min.js

zepto.min.js

icons-extra.css

2.html相关代码

<div class="mui-content">
<div style="padding: 10px 10px;">
<div id="slider" class="mui-slider">
<div class="mui-slider-group" style="height:64px;text-align:center;">
<div id="item1111" class="mui-slider-item">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
aaa
</li>
</ul>
</div>
</div>
</div>

<div id="item2222" class="mui-slider-item">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
bbb
</li>
</ul>
</div>
</div>
</div>

<div id="item3333" class="mui-slider-item">
<div id="scroll1" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
ccc
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div id="1111" class="mui-control-content">
<div id="scroll" class="mui-scroll-wrapper" data-scroll="1">
<div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
<div>
<ul>

<li>第1个内容</li>

<li>第2个内容</li>

<li>第3个内容</li>

<li>第4个内容</li>

</ul>
</div>
</div>
</div>
</div>

<div id="2222" class="mui-control-content">
<div id="scroll" class="mui-scroll-wrapper" data-scroll="1">
<div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
<div>
<ul>

<li>第1个内容</li>

<li>第2个内容</li>

<li>第3个内容</li>

<li>第4个内容</li>

</ul>
</div>
</div>
</div>
</div>

<div id="3333" class="mui-control-content">
<div id="scroll" class="mui-scroll-wrapper" data-scroll="1">
<div class="mui-scroll" style="transform: translate3d(0px, 0px, 0px) translateZ(0px);">
<div>
<ul>

<li>第1个内容</li>

<li>第2个内容</li>

<li>第3个内容</li>

<li>第4个内容</li>

</ul>
</div>
</div>
</div>
</div>

</div>
</div>

3.js代码

$('#slider').on('slide',function(e){
var slider = mui("#slider").slider();
var id = $(slider.currentPage.element).attr("id");
$(".mui-slider-item").removeClass("mui-active");
$(".mui-control-content").removeClass("mui-active");
$("#"+id).addClass("mui-active");
$("#"+id.substring(4)).addClass("mui-active");

});

样式可以效果自己适当调整，切换的效果已经可以，希望能帮助到大家，也为自己留下保存下记录，方便以后直接使用