[Java教程]暴走漫画

0 2015-09-28 11:00:11

目前暴走漫画demo主要做出了5个一级页面。当按下页面下方对应按钮时，按钮颜色改变，并且在do_ViewShower中展示出对应页面(page3则是新打开一个页面)。       一  总体布局

在主页面index中，下方是五个控制页面显示的按钮；上方是do_ViewShower组件，用来存储将要展示的页面,如图index所示。其中do_ViewShower组件与按钮之间的关系对应的代码如下：[mw_shl_code=applescript,true] //声明四个按钮，在主页中间展示

var button0=ui("do_alayout_4");

var button1=ui("do_alayout_5");

var button2=ui("do_alayout_7");

var button3=ui("do_ALayout_17");

var zhongyang=ui("do_ALayout_18");

var iv0=ui("do_imageview_1");

var iv1=ui("do_imageview_2");

var iv2=ui("do_imageview_4");

var iv3=ui("do_imageview_5");

var buttons = [ button0,button1,button2,button3 ];

var ivs= [iv0,iv1,iv2,iv3];

//中央按钮,按下出现新的一页

zhongyang.on("touchDown",function()

{

zhongyang.source="source://image/anxia.png";

});

zhongyang.on("touch",function()

{

zhongyang.source="source://image/source://image/13.png";

app.openPage("source://view/page3/cell3.ui");

});

var checkFun = function(index) {

for (var i = 0; i < buttons.length; i++) {

if (index == i) { // 表示选中了第几个

ivs.source = "source://image/d" + i + ".png";

} else {

ivs.source = "source://image/s" + i + ".png";

}

}

viewShower.showView("view" + index, "fade", 300);

};

buttons.forEach(function(button, i) {

button.on("touch", function(data, e) {

checkFun(i);

});

});

var viewShower = ui("do_ViewShower_1");

var data = [ {//写数据

"id" : "view0",

"path" : "source://view/page1/cell1.ui"

}, {

"id" : "view1",

"path" : "source://view/page2/cell2.ui"

}, {

"id" : "view2",

"path" : "source://view/page4/cell4.ui"

}, {

"id" : "view3",

"path" : "source://view/page5/cell5.ui"

}  ];

viewShower.addViews(data);//绑定数据

viewShower.showView("view1");//确定showvoew最开始显示的页面

//viewShower订阅一个viewChanged事件，当viewShower切换View 时触发

viewShower.on("viewChanged", function(data, e) {

//触发一个自定义事件 indexChanged, 在view0中订阅该事件

//        page.fire("indexChanged");

//触发一个带参数的自定义事件，data的值为：View切换后的id

page.fire("indexChanged",data);

});

//翻页

page.on("back",function(){app.closePage()});[/mw_shl_code]

              二  page部分

下面是五个页面从左到右的概扩。

(1)page1部分主要使用listview，页面可以下拉刷新，如图 1.png所示。

在listview中使用了三个cell(结构如图11.png)，分别对应与标头信息(cell1list1.ui)，图片(cell1list2.ui)与结尾(cell1list3.ui)。刷新功能部分，需要首先将listview的ui界面中的isHeaderVisble设置为true。listview使用代码如下所示：[mw_shl_code=javascript,true]var app = sm("do_App");

var page = sm("do_Page");

var nf = sm("do_Notification");var listview = ui("do_ListView_1");

var list_listdata = mm("do_ListData");

listview.bindItems(list_listdata);//listview绑定数据，绑定事件，点击触发

list_listdata.addData([

{template:0,"image":"source://image/71.png","name":"indifference","date":"8.24"},

{template:1,"image":"source://image/image1.jpg"},

{template:2,"zan":"123个赞","pinglun":"341个评论","image1":"source://image/51.png","image2":"source://image/52.png","image3":"source://image/53.png"},

{template:0,"image":"source://image/72.png","name":"cross","date":"8.25"},

{template:1,"image":"source://image/image2.jpg"},

{template:2,"zan":"23个赞","pinglun":"123个评论","image1":"source://image/51.png","image2":"source://image/52.png","image3":"source://image/53.png"}

]);

listview.refreshItems();

listview.on("pull", function(data) {

/**

* @此事件将会多次执行.

* @state == 0 : pull动作开始

* @state == 1 : pull动作持续中

* @state == 2 : pull动作结束

*/

if (data.state !== 2) return;

this.rebound();

});[/mw_shl_code]

(2)page2部分的实现比较复杂，使用了listview，segment，slideview三个组件的嵌套循环。

我们首先对三层组件的嵌套进行分解。首先在page5的界面中，我们可以看到使用了一个listview使得界面可以上下滑动。然后在热门收藏对应的这一部分，界面是可以左右滑动的，这是使用了segmentview。最后，每一个可以左右滑动的小框，每隔一定时间又会自动变换图片，这一部分是使用slideview与timer制作。

在写页面时，从外圈向里圈写。 cell2.ui的布局如图221所示，这里只有一个listview，代码如下:

[mw_shl_code=javascript,true]

//获取listview，绑定listdata

var listview = ui("do_ListView_1");

var list_listdata = mm("do_ListData");

listview.bindItems(list_listdata);//listview绑定数据，绑定事件，点击触发

list_listdata.addData([

{template:0},

{template: 1,"image1":"source://image/16.png","image2":"source://image/17.png"},

{template: 1,"image1":"source://image/18.png","image2":"source://image/19.png"},

{template: 1,"image1":"source://image/110.png","image2":"source://image/111.png"},

{template: 1,"image1":"source://image/112.png","image2":"source://image/113.png"},

{template: 1,"image1":"source://image/114.png","image2":"source://image/115.png"},

{template: 1,"image1":"source://image/116.png","image2":"source://image/117.png"},

{template: 1,"image1":"source://image/118.png","image2":"source://image/119.png"},

{template: 1,"image1":"source://image/120.png","image2":"source://image/121.png"},

{template: 1,"image1":"source://image/122.png","image2":"source://image/123.png"},

{template: 1,"image1":"source://image/124.png","image2":"source://image/125.png"}

]);

listview.refreshItems();

[/mw_shl_code]

在cell2.ui的两个cell(cell2child.ui , cell2child1.ui)中，cell2child1.ui(如图222)是一个最基本的cell，而cell2child.ui中包含了一个segmentview，在cell2child1.ui对应的js文件(cell2child.ui.js)中，对segment进行了数据绑定，代码如下：

[mw_shl_code=javascript,true]var app = sm("do_App");

var page = sm("do_Page");

var nf = sm("do_Notification");ui("$").setMapping({

});//获取segmentview，绑定listdata

var SegmentView = ui("do_SegmentView_2");

var SegmentView_listdata = mm("do_ListData");

SegmentView.bindItems(SegmentView_listdata);//segmentview绑定数据，绑定事件，点击触发

SegmentView_listdata.addData([  {template:0},

{template:1},

{template:2},

{template:3},

{template:4}

]);

SegmentView.refreshItems();

[/mw_shl_code]

我们可以从cell2child.ui.js的代码中看到，segmentview一共绑定了五个cell。在cell2childseg文件中，实现了本嵌套的第三层。在cell2child的模板cell2childseg2.ui，cell2childseg5.ui，cell2childseg6.ui，cell2childseg7.ui，cell2childseg8.ui，中使用了一个slideview组件。我们在cell2childseg2.ui，cell2childseg5.ui，cell2childseg6.ui，cell2childseg7.ui，cell2childseg8.ui，对应的js文件中对slideview的内容进行了绑定，同时加上了定时器，使它们可以自动翻转。这里选取cell2childseg2.ui为例，代码如下：

[mw_shl_code=applescript,true]var app = sm("do_App");

var page = sm("do_Page");

var nf = sm("do_Notification");ui("$").setMapping({

});var do_SlideView_1 = ui("do_SlideView_1");

var slide_listdata = mm("do_ListData");

do_SlideView_1.bindItems(slide_listdata);//listview绑定数据，绑定事件，点击触发

slide_listdata.addData([

{template:0,"text":"总有一种世界是你未曾见过","image":"source://image/q7.jpg"},

{template:1,"text":"总有一种世界是你未曾见过","image":"source://image/q8.jpg"},

{template:2,"text":"总有一种世界是你未曾见过","image":"source://image/q9.jpg"}]);

do_SlideView_1.refreshItems();

var i=1;

var timer01 = mm("do_Timer");

timer01.delay = 0;

timer01.interval = 1000;var DURATION01 = 0;timer01.on("tick", function(){

if(DURATION01 >3){

DURATION01 = 0;

do_SlideView_1.index=i%3;

i++;

}

DURATION01++;

});

timer01.start();

[/mw_shl_code]          最后我们看slideview所绑定的数据，有四个cell，则有四张图片来回改变。slideview的模板直接就是一张图片。这样，我们就完成了三个组件的嵌套使用。

        (3)page3部分与其他page不同的是，点击按钮弹出的是一个单独的页面。

当点击中间的按钮时，下图page3显示，当点击page3图片所示的“X”时，页面关闭。代码如下：[mw_shl_code=javascript,true]

var nf = sm("do_Notification");

var app = sm("do_App");

var page = sm("do_Page");var close=ui("do_ALayout_2");//翻页

page.on("back",function(){app.closePage()});

close.on("touch",function(){

app.closePage()

});

[/mw_shl_code]

(4)page4比较简单，直接画页面就可以。

(5)page5主要使用listview组件。

代码如下：[mw_shl_code=applescript,true]//related to cell5.ui

var nf = sm("do_Notification");

var app = sm("do_App");

var page = sm("do_Page");

var listview = ui("do_ListView_1");

var list_listdata = mm("do_ListData");

listview.bindItems(list_listdata);

list_listdata.addData([

{template:0}

]);

listview.refreshItems();

[/mw_shl_code]

本文网址：http://www.shaoqun.com/a/145186.html

*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：admin@shaoqun.com。

0