HTML5培训第13节课堂笔记(mui绑定事件、预加载页面传值、懒加载、tabbar的切换)

HTML5培训第13节课堂笔记

1.mui绑定事件：

mui("#list").on("tap","a",function(){

              });

 

 

.on( event , selector , handler )

event

Type: String

需监听的事件名称，例如：'tap'

selector

Type: String

选择器

handler

Type: Function( Event event )

事件触发时的回调函数，通过回调中的event参数可以获得事件详情

 

 

 

2.预加载页面传值

detail.html中先构建一个方法

window.addEventListener("showNews",function(e){

                     varid=e.detail.id;

              });

 

在newslist界面中：

mui.fire(detailsPage,"showNews",{id:newsid});

 

通过自定义事件，用户可以轻松实现页面间数据传递。

 

监听自定义事件

window.addEventListener('customEvent',function(event){

  //通过event.detail可获得传递过来的参数内容

  ....

});

 

触发自定义事件

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

mui.fire(targetPage,'customEvent',{

  //自定义事件参数

});

.fire( target , event , data )

target

Type: WebviewObject

需传值的目标webview

event

Type: String

自定义事件名称

data

Type: JSON

json格式的数据

 

 

 

 

3.图文列表的实现 :mlist(快捷）

 

 

4.lazyload，懒加载

 

延迟加载的理念：页面初始化时，暂不加载处于屏幕可见区域之外的图片。该方案会有如下几大好处：

<li>加快页面渲染速度</li>

<li>提升页面滚动性能</li>

<li>默认不下载屏幕外的图片，减少网络流量</li>

加载官方的2个脚本

<script src="../js/mui.lazyload.js"></script>

       <scriptsrc="../js/mui.lazyload.img.js"></script>

 

在需要的界面中加一句：

mui(document).imageLazyload({

                            placeholder:'../images/60x60.gif'

                     });

 

 

5.tabbar的切换：

 

 varcurrent="newslist.html";

           varsubpages=["newslist2.html","newslist3.html","newslist4.html"];

           var subpage_styles={

                             top:"40px",

                             bottom:"50px"

               };

 

//创建其他3个页面的webview

                     for(vari=0;i<subpages.length;i++)

                     {

                            varsub=plus.webview.create(subpages[i],

                                   subpages[i],

                                   subpage_styles);

                            sub.hide();   

                     }

 

mui(".mui-bar").on("tap","a",function(){

                            vartarget=this.getAttribute("href");

                            plus.webview.show(target);

                            plus.webview.hide(current);

                            current=target;

                     });

 

 

 

 

WebviewObject plus.webview.create( url,id, styles, extras );

说明：

 

创建Webview窗口，用于加载新的HTML页面，可通过styles设置Webview窗口的样式，创建完成后需要调用show方法才能将Webview窗口显示出来。

 

参数：

 

url: ( String ) 可选新窗口加载的HTML页面地址

新打开Webview窗口要加载的HTML页面地址，可支持本地地址和网络地址。

id: ( String ) 可选新窗口的标识

窗口标识可用于在其它页面中通过getWebviewById来查找指定的窗口，为了保持窗口标识的唯一性，应该避免使用相同的标识来创建多个Webview窗口。如果传入无效的字符串则使用url参数作为WebviewObject窗口的id值。

styles: ( WebviewStyles ) 可选创建Webview窗口的样式（如窗口宽、高、位置等信息）

extras: ( JSON ) 可选创建Webview窗口的额外扩展参数

值为JSON类型，设置扩展参数后可以直接通过Webview的点（“.”）操作符获取扩展参数属性值，如： varw=plus.webview.create('url.html','id',{},{preload:"preloadwebview"}); // 可直接通过以下方法获取preload值console.log(w.preload); //输出值为“preload webview”