MUI-slide组件轮播

最新推荐文章于 2019-09-30 16:05:55 发布

佛佛ง

最新推荐文章于 2019-09-30 16:05:55 发布

阅读量1.3k

点赞数

分类专栏： MUI

本文链接：https://blog.csdn.net/LzzMandy/article/details/84951785

版权

MUI 专栏收录该内容

36 篇文章 6 订阅

订阅专栏

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>

佛佛ง

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
MUI-slide组件轮播

slide的Dom结构如下：&lt;div class="mui-slider"&gt; &lt;div class="mui-slider-group"&gt; &lt;!--第一个内容区容器--&gt; &lt;div class="mui-slider-item"&gt; &lt;!-- 具体内容 --&gt; &am
复制链接

扫一扫