暴走漫画

目前暴走漫画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");

            （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);

        （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]