document.querySelector('.mui-slider').addEventListener('slide', function(event) { //注意slideNumber是从0开始的； document.getElementById("info").innerText = "你正在看第"+(event.detail.slideNumber+1)+"张图片"; });

用户开发应用中会大量使用事件功能。除了浏览器内置的事件及mui框架内置的事件（比如手势事件）外，mui同时支持用户触发和绑定自定义事件。通过自定义事件，用户可以轻松实现页面间数据传递。

监听自定义事件

添加自定义事件监听操作和标准js事件监听类似，可直接通过window对象添加，如下：

window.addEventListener('customEvent',function(event){ //通过event.detail可获得传递过来的参数内容 .... });

触发自定义事件

通过mui.fire方法可触发目标窗口的自定义事件：

mui.fire(targetPage,'customEvent',{ //自定义事件参数 });

示例：假设如下场景：从新闻列表页面进入新闻详情页面，新闻详情页面为共用页面，通过传递新闻ID通知详情页面需要显示具体哪个新闻，详情页面再动态向服务器请求数据，mui要实现类似需求可通过如下步骤实现：

列表页面代码如下：

//初始化预加载详情页面 mui.init({ preloadPages:[{ id:'detail.html', url:'detail.html' } ] }); var detailPage = null; //添加列表项的点击事件 mui('.mui-content').on('tap', 'a', function(e) { var id = this.getAttribute('id'); //获得详情页面 if(!detailPage){ detailPage = plus.webview.getWebviewById('detail.html'); } //触发详情页面的newsId事件 mui.fire(detailPage,'newsId',{ id:id }); //打开详情页面 mui.openWindow({ id:'detail.html' }); });

详情页面代码如下：

//添加newId自定义事件监听 window.addEventListener('newsId',function(event){ //获得事件参数 var id = event.detail.id; //根据id向服务器请求新闻详情 ..... });

mui框架内置了图片轮播插件，通过该插件封装的JS API，用户可以设定是否自动轮播及轮播周期，如下为代码示例：

//获得slider插件对象 var gallery = mui('.mui-slider'); gallery.slider({ interval:5000//自动轮播周期，若为0则不自动播放，默认为0； });

因此若希望图片轮播不要自动播放，而是用户手动滑动才切换，只需要通过如上方法，将slideshowDelay参数设为0即可。

若要跳转到第x张图片，则可以使用图片轮播插件的gotoItem方法，例如：

//获得slider插件对象 var gallery = mui('.mui-slider'); gallery.slider().gotoItem(index);//跳转到第index张图片，index从0开始；