JavaScript使用DeviceOne开发实战(四)仿优酷视频应

大家没有进行开发之前首先需要考虑系统的差异性,比如说IOS手机有没有回退键,所以在开发时一定要考虑二级解密需要有回退键,否则ios的手机就会陷入到这个页面回不去。

安卓系统有回退键,针对这个情况需要要求用户在3秒钟之内连续按回退键两次才退出系统,以此防止用户误按回退键,具体代码实现如下:

[mw_shl_code=javascript,true]page.on("back", function(){ if (canBack) { global.exit(); } else { nf.toast("再按一次退出优酷"); canBack = true; delay3.start(); } }); var delay3 = mm("do_Timer"); delay3.delay = 3000; delay3.interval = 1000; delay3.on("tick", function(){ this.stop(); canBack = false; });[/mw_shl_code]

仿优酷视频实现了四个主界面,页面之间可以通过左右滑动页面来切换页面,也可以通过点击底部按钮实现页面间的切换,并且底部按钮的颜色也会随着页面的切换而改变。此功能通过slideview组件实现,效果图片如下:

JavaScript使用DeviceOne开发实战(四)仿优酷视频应

底部变化:

代码实现如下:

[mw_shl_code=javascript,true] function subChange(num,button,imgs,lbs) { var strings = ["下载","频道","订阅","我的"]; button.text = strings[num]; var url = [ "source://image/main/shouye", "source://image/main/pindao", "source://image/main/dingyue", "source://image/main/wode" ]; for(var i = 0 ; i < 4 ; i++) { imgs.source = url; lbs.fontColor = "222222FF"; } imgs[num].source += "b"; lbs[num].fontColor = "0080FFFF"; for(var i = 0 ; i < 4 ; i++) { imgs.source += ".png"; } img.visible = false; bt.visible = false; } function indexChange(num,sv,button,imgs,lbs,img,bt) { sv.set({index: num}); sv.refreshItems(); subChange(num,button,imgs,lbs); } do_button.on("touch",function(data, e){ if(do_button.text == "下载") { app.openPage("source://view/download.ui",""); } }); //点击底部按钮实现主界面以及底部图片颜色的切换 var action_imgs = [ui("img_0"), ui("img_1"), ui("img_2"), ui("img_3")]; var action_lbs = [ui("lb_0"), ui("lb_1"), ui("lb_2"), ui("lb_3"),]; do_slideview_1.bindItems(listdata ); listdata.addData([ {template : 0}, {template : 1}, {template : 2}, {template : 3} ]); do_slideview_1.refreshItems({}); var shouye = ui("shouye"); shouye.on("touch",function(data, e){ indexChange(0,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3); }); var pindao = ui("pindao"); pindao.on("touch",function(data, e){ indexChange(1,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3); }); var dingyue = ui("dingyue"); dingyue.on("touch",function(data, e){ indexChange(2,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3); }); var wode = ui("wode"); wode.on("touch",function(data, e){ indexChange(3,do_slideview_1,do_button,action_imgs,action_lbs,imageview,do_button_3); }); //滑动主界面实现底部图片的切换 do_slideview_1.on("indexChanged",function(data, e){ subChange(data,do_button,action_imgs,action_lbs); }); [/mw_shl_code]

首页海报之间的切换和页面间切换类似,但海报间切换还实现了自动定时切换的功能,每三秒钟切换一次,时间控制由do_timer来实现,在使用这个组件时,时间段不能是100,否则ios系统将会有不兼容的问题,图片及代码如下所示:

图片:

JavaScript使用DeviceOne开发实战(四)仿优酷视频应

代码:

[mw_shl_code=javascript,true] var ind = 0; timer.delay = 0; timer.interval = 1000; timer.start({}); timer.on("tick", function(){ DURATION++; if(DURATION == 3){ ind =(ind+1)%4 movieview.set({index: ind}); movieview.refreshItems(); DURATION = 0; } });[/mw_shl_code]

点击主界面的左上角的下载按键后,进入下载界面,点击下载后应用将从网上下载另个图片的海报来取代原海报,下载的进度通过进度条来显示,下载功能通过http组件的download方法实现,进度条通过do_progressbar组件实现,其效果图及代码实现如下:

效果:

JavaScript使用DeviceOne开发实战(四)仿优酷视频应

代码:

[mw_shl_code=javascript,true] var http = mm("do_Http"); http.timeout = 30000; http.contentType = "application/json"; http.url = "http://h.hiphotos.baidu.com/baike/c0%3Dbaike60%2C5%2C5%2C60%2C20%3Bt%3Dgif/sign=88e9903f8735e5dd8421ad8d17afcc8a/f9198618367adab48dc66b2e89d4b31c8701e44d.jpg"; http.on("success", function(data) { do_imageview_1.source="data://xiazai.png"; do_button_2.text = "下载成功"; }); http.on("progress", function(data) { do_ProgressBar_0.progress = data.currentSize * 100 / data.totalSize; lb_progress.text = data.currentSize * 100 / data.totalSize + "%"; }); do_button_2.on("touch",function(data, e){ http.download("data://xiazai.png"); });[/mw_shl_code]

右上角有三个按钮点击左数第一个按钮之后将弹出一个查找界面,查找界面的搜索框由textfield组件实现。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgzzfy.html