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>
当拖动切换显示内容时,会触发slide事件,通过该事件的detail.slideNumber参数可以获得当前显示项的索引(第一项索引为0,第二项为1,以此类推),利用该事件,可在显示内容切换时,动态处理一些业务逻辑。
如下为一个可拖动式选项卡示例,
1、为提高页面加载速度,页面加载时,仅显示第一个选项卡的内容,第二、第三、第四选项卡内容为空。
2、图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化,比如我们可以在图片轮播界面显示当前正在看的是第几张图片:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<!--App自定义的css-->
<!--<link rel="stylesheet" type="text/css" href="../css/app.css"/>-->
</head>
<body>
<header class="mui-bar mui-bar-nav">
<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
<h1 class="mui-title">图片轮播</h1>
</header>
<div class="mui-content">
<ul class="mui-table-view mui-table-view-chevron">
<li id="switch" class="mui-table-view-cell">
定时轮播
<div class="mui-switch">
<div class="mui-switch-handle"></div>
</div>
</li>
</ul>
</div>
<div id="slider" class="mui-slider">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="../images/yuantiao.jpg"></a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item" id="item1">
<a href="#"><img src="../images/shuijiao.jpg"></a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item" id="item2">
<!-- <a href="#"><img src="../images/muwu.jpg"></a> -->
</div>
<!-- 第三张 -->
<div class="mui-slider-item" id="item3">
<!-- <a href="#"><img src="../images/cbd.jpg"></a> -->
</div>
<!-- 第四张 -->
<div class="mui-slider-item" id="item4">
<!-- <a href="#"><img src="../images/yuantiao.jpg"></a> -->
</div>
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#"><img src="../images/shuijiao.jpg"></a>
</div>
</div>
<!-- 圆点标志 -->
<div class="mui-slider-indicator">
<!-- 默认显示第一个图片 -->
<div class="mui-indicator mui-active"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
<div class="mui-indicator"></div>
</div>
</div>
<div id="info">你正在看第1张图片</div>
<script src="../js/mui.min.js"></script>
<script type="text/javascript" charset="utf-8">
mui.init({
swipeBack: true //启用右滑关闭功能
});
var slider = mui("#slider");
// 开关
document.getElementById("switch").addEventListener('toggle', function(e) {
if (e.detail.isActive) {
slider.slider({
interval: 5000
});
} else {
slider.slider({
interval: 0
});
}
});
var item2Show = false,
item3Show = false,
item4Show = false; //子选项卡是否显示标志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
if (event.detail.slideNumber === 1 && !item2Show) { //切换到第二个选项卡
//根据具体业务,动态获得第二个选项卡内容;
var content = '<a href="#"><img src="../images/muwu.jpg"></a>';
//显示内容
document.getElementById("item2").innerHTML = content;
//改变标志位,下次直接显示
item2Show = true;
} else if (event.detail.slideNumber === 2 && !item3Show) {
//切换到第三个选项卡
//根据具体业务,动态获得第三个选项卡内容;
var content = '<a href="#"><img src="../images/cbd.jpg"></a>';
//显示内容
document.getElementById("item3").innerHTML = content;
//改变标志位,下次直接显示
item3Show = true;
} else if (event.detail.slideNumber === 3 && !item4Show) {
//切换到第三个选项卡
//根据具体业务,动态获得第三个选项卡内容;
var content = '<a href="#"><img src="../images/yuantiao.jpg"></a>';
//显示内容
document.getElementById("item4").innerHTML = content;
//改变标志位,下次直接显示
item3Show = true;
}
});
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的;
document.getElementById("info").innerText = "你正在看第" + (event.detail.slideNumber + 1) + "张图片";
});
</script>
</body>
</html>