暴走漫畫

標籤：

       目前暴走漫畫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]                    

暴走漫畫