HTML5技术

HTML5 极简的JS函数 - zxh91989(8)

字号+ 作者:H5之家 来源:H5之家 2017-12-07 12:10 我要评论( )

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

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • html5知识点:简析正则表达式 - 千千小助

    html5知识点:简析正则表达式 - 千千小助

    2017-12-02 08:02

  • html5知识点:CSS3新增选择器 - 千千小助

    html5知识点:CSS3新增选择器 - 千千小助

    2017-11-30 09:00

  • 推荐10个适合初学者的 HTML5 入门教程 - 赵一航

    推荐10个适合初学者的 HTML5 入门教程 - 赵一航

    2017-11-27 08:03

  • html5知识点:HTML5新特性 - 千千小助

    html5知识点:HTML5新特性 - 千千小助

    2017-11-24 18:00

网友点评
r