The cartoon of the mob.

At present, the cartoon demo mainly made 5 first-level pages. When you press the corresponding button at the bottom of the page, the button color changes, and the corresponding page is displayed in the Do_viewshower (Page3 is a new page opened).a general layout
            in the main page index, below is the five control page display button;The Do_viewshower component is used to store the page that will be displayed, as shown in index. The code that corresponds to the relationship between the Do_viewshower component and the button is as follows: [Mw_shl_code=applescript,true]

Declare four buttons to show in the middle of the home page
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];
Central button, press to appear a new page
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) {//indicates that the first number is selected
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 = [{//write
"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);//Binding

Viewshower.showview ("View1");//determines the page that the Showvoew initially displays

Viewshower subscribes to a viewchanged event that is triggered when the Viewshower switches view
Viewshower.on ("Viewchanged", function (data, E) {
Triggers a custom event, indexchanged, to subscribe to the event in View0
Page.fire ("indexchanged");
Triggers a custom event with parameters, the value of data is: The ID after view switch
Page.fire ("indexchanged", data);
});

Page

Page.On ("Back", function () {app.closepage ()}); [/mw_shl_code]

two page section
The following is a five-page spread from left to right.

(1) Page1 part of the main use of the ListView, the page can be pulled down to refresh, as shown in 1.png.

Three cells (structure 11.png) are used in the ListView, respectively, corresponding to the header information (Cell1list1.ui), the picture (Cell1list2.ui) and the End (Cell1list3.ui). To refresh the features section, you need to first set the isheadervisble in the UI interface of the ListView to True. The ListView uses the code as follows: [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 binding data, binding event, click Trigger
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 Likes", "Pinglun": "341 Comments", "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 Likes", "Pinglun": "123 Comments", "Image1": "Source://image/51.png", "Image2": "Source://image/52.png", "Image3": "Source://image/53.png"}

]);
Listview.refreshitems ();
Listview.on ("Pull", function (data) {
/**
* @ This event will be executed more than once.
* @state = = 0:pull action starts
* @state = = 1:pull Action continued in
* @state = = 2:pull Action Ended
*/

if (data.state!== 2) return;
This.rebound ();
}); [/mw_shl_code]

(2) The implementation of the Page2 section is more complex and uses a nested loop of Listview,segment,slideview three components.
We first decompose the nesting of three-tier components. First, in the Page5 interface, we can see that using a ListView allows the interface to slide up and down. Then in the popular collection corresponding to this section, the interface is able to swipe left and right, which is used by Segmentview. Finally, each can be left and right to slide the small box, every time and will automatically change the picture, this part is the use of Slideview and timer production.
When writing a page, write to the inner ring from the outer ring. Cell2.ui Layout 221 shows that there is only one ListView, the code is as follows:
[Mw_shl_code=javascript,true]
Get listview, Bind Listdata
var ListView = UI ("Do_listview_1");
var list_listdata = mm ("Do_listdata");
Listview.binditems (List_listdata);

ListView binding data, binding event, click Trigger
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]
In Cell2.ui's two cells (Cell2child.ui, Cell2child1.ui), Cell2child1.ui (222) is the most basic cell, And the Cell2child.ui contains a segmentview, in the cell2child1.ui corresponding JS file (cell2child.ui.js), the segment is data binding, the code is as follows:
[Mw_shl_code=javascript,true]var app = SM ("Do_app");
var page = SM ("Do_page");
var nf = sm ("Do_notification");

UI ("$"). SetMapping ({


});

Get Segmentview, bind Listdata
var Segmentview = UI ("Do_segmentview_2");
var segmentview_listdata = mm ("Do_listdata");
Segmentview.binditems (Segmentview_listdata);

Segmentview bind data, bind events, click Trigger
Segmentview_listdata.adddata ([{template:0},
{template:1},
{Template:2},
{Template:3},
{Template:4}
]);
Segmentview.refreshitems ();
[/mw_shl_code]
We can see from the Cell2child.ui.js code that Segmentview has a total of five cells bound. In the Cell2childseg file, the third layer of this nesting is implemented. In Cell2child template Cell2childseg2.ui,cell2childseg5.ui,cell2childseg6.ui,cell2childseg7.ui,cell2childseg8.ui, a Slideview component is used 。 We bind the contents of Slideview in Cell2childseg2.ui,cell2childseg5.ui,cell2childseg6.ui,cell2childseg7.ui,cell2childseg8.ui, the corresponding JS file, with Timers are added so that they can be flipped automatically. Here is the example of Cell2childseg2.ui, the code is as follows:
[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 binding data, binding event, click Trigger
Slide_listdata.adddata ([
{template:0, "text": "There is always a world you have never seen", "image": "Source://image/q7.jpg"},
{template:1, "text": "There is always a world you have never seen", "image": "Source://image/q8.jpg"},
{template:2, "text": "There is always a world you have never seen", "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] Finally we look at the data bound by Slideview, there are four cells, then there are four pictures to change back and forth. The Slideview template is just a picture. In this way, we have completed nesting of three components.







(3) Page3 part is different from other page, the click button pops up a separate page.
When you click the middle button, the page3 displays, and when you click the "X" shown in the Page3 image, the page closes. The code is as follows: [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
Page.On ("Back", function () {app.closepage ()});
Close.On ("Touch", function () {
App.closepage ()
});
[/mw_shl_code]

(4) Page4 is relatively simple, direct drawing page can be.


(5) Page5 mainly uses the ListView component.
The code is as follows: [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]

The cartoon of the mob.