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开始;