一、简介: 轮播组件是mui提供的一个核心组件,在该核心组件基础上,衍生出了图片轮播、可拖动式图文表格、可拖动式选项卡、左右滑动9宫格等组件,这些组件有较多共同点,如Dom构造基本相同。
<div class="mui-slider">
<div class="mui-slider-group">
<!--第一个内容区容器-->
<div class="mui-slider-item">
<!-- 具体内容 -->
</div>
<!--第二个内容区-->
<div class="mui-slider-item">
<!-- 具体内容 -->
</div>
</div>
</div>
二、以选项卡轮播为例
<div class="mui-slider" id="item">
<div class="mui-slider-group" >
<!--第一个内容区容器-->
<div class="mui-slider-item" id="item2">
<!-- 具体内容 -->小狗狗
</div>
<!--第二个内容区-->
<div class="mui-slider-item" id="item3">
<!-- 具体内容 -->
</div>
</div>
</div>
// 轮播初始化,支持自动播放
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:3000//自动轮播周期,若为0则不自动播放,默认为0;5000即5秒。
});
//当拖动切换显示内容时,会触发slide事件,通过该事件的detail.slideNumber参数可以获得当前显示项的索引(第一项索引为0,第二项为1,以此类推),利用该事件,可在显示内容切换时,动态处理一些业务逻辑。
//如下为一个可拖动式选项卡示例,为提高页面加载速度,页面加载时,仅显示第一个选项卡的内容,第二、第三选项卡内容为空。当切换到第二、第三个选项卡时,再动态获取相应内容进行显示:
var item2Show = false,item3Show = false;//子选项卡是否显示标志
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
if (event.detail.slideNumber === 0&&!item2Show) {
//切换到第二个选项卡
//根据具体业务,动态获得第二个选项卡内容;
var content = '大狗狗';
//显示内容
document.getElementById("item2").innerHTML = content;
//改变标志位,下次直接显示
item2Show = true;
} else if (event.detail.slideNumber === 1&&!item3Show) {
//切换到第三个选项卡
//根据具体业务,动态获得第三个选项卡内容;
var content = '老猫咪';
//显示内容
document.getElementById("item3").innerHTML = content;
//改变标志位,下次直接显示
item3Show = true;
}
});
//图片轮播、可拖动式图文表格等均可按照同样方式监听内容变化,比如我们可以在图片轮播界面显示当前正在看的是第几张图片:
document.querySelector('.mui-slider').addEventListener('slide', function(event) {
//注意slideNumber是从0开始的;
document.getElementById("item").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片";
});
三、以图片轮播为例
图片轮播:是继承自slide插件,因此其DOM结构、事件均和slide插件相同;默认不支持循环播放,DOM结构如下:
<div class="mui-slider">
<div class="mui-slider-group">
<div class="mui-slider-item"><a href="#"><img src="1.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="2.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="3.jpg" /></a></div>
<div class="mui-slider-item"><a href="#"><img src="4.jpg" /></a></div>
</div>
</div>
构造支付宝“招财进宝”图片轮播如下:
<div id="slider" class="mui-slider" style="margin-top:20px;">
<div class="mui-slider-group mui-slider-loop">
<!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="./image/banner.png">
</a>
</div>
<!-- 第一张 -->
<div class="mui-slider-item">
<a href="#">
<img src="./image/banner.png">
</a>
</div>
<!-- 第二张 -->
<div class="mui-slider-item">
<a href="#">
<img src="./image/banner.png">
</a>
</div>
<!-- 第三张 -->
<div class="mui-slider-item">
<a href="#">
<img src="./image/banner.png">
</a>
</div>
<!-- 第四张 -->
<div class="mui-slider-item">
<a href="#">
<img src="./image/banner.png">
</a>
</div>
<!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
<div class="mui-slider-item mui-slider-item-duplicate">
<a href="#">
<img src="./image/banner.png">
</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>
<script type="text/javascript">
mui.init()
// 轮播初始化,支持自动播放
//获得slider插件对象
var gallery = mui('.mui-slider');
gallery.slider({
interval:3000//自动轮播周期,若为0则不自动播放,默认为0;5000即5秒。
});
</script>
页面展示
相关链接
1、MUI的简介
2、MUI的字体图标
3、MUI的事件处理
4、HbuilderX中新建MUI下的移动端App
5、H5+ Webview窗口对象
6、MUI-底栏实现-页面切换
7、MUI-标题栏实现-样式复写效果
8、MUI-栅格系统-实现元素排版
9、MUI-列表实现
10、MUI-列表实现2
11、MUI-轮播插件实现-UI组件
12、MUI-弹出菜单
13、MUI-页面刷新
14、MUI-新建子页面
15、MUI-页面之间传值(打开新的子页面)
16、HTML5+规范API-拍照功能
17、HTML5+规范API-系统相册获取功能
18、HTML5+规范API-地理位置获取
19、MUI-上拉刷新和下拉刷新
20、HTML5+规范API-扫码功能
21、HTML5+规范API-系统通讯录获取功能
22、Hbuilder无法完成应用程序云打包,一直报错需要打包校验
23、Hbuilder-应用程序打包
24、移动APP开发的三种常见模式
25、IOS系统测试APP时发现input内无法选中并输入值
26、MUI-购物车