ListView Settings Headerview and Footerview

"Introduction"
Headerview is usually seen as the kind of listview gesture that slides out of the upper part, pulls down to a certain position, and then starts to request network data, then refreshes the ListView list.
Footerview is usually a ListView gesture that slides until the last piece of data is displayed, then continues to hold the slide to a certain position and then let go, loading the next page of data.
Note: In addition to the ListView, other headers like Scrollview,webview and footer and ListView are basically the same.


"Properties"
the listview of the Do platform has 4 properties to control Headerview and Footview


* Footerview Bottom view, default is empty, if you want to set the value, can only set to source://beginning of the UI file path, such as "Source://view/1.ui"
* Headerview table header View, the default is null, if you want to set a value, you can only set the UI file path to the beginning of source://, such as "Source://view/2.ui"
* isfootervisible Whether to display Footerview, the default is false, swipe up to the bottom is not see Footerview, if set to true, but the Footerview property is empty, A default footerview will appear, which is enough to cope with some common lists. If you need to customize Footerview, you need to set the Footerview property
* isheadervisible display Headerview, default is False, and isfootervisible principle is the same. There are also default Headerview and customizable.


"Events"
* Pull event: corresponds to Headerview
the data returned by the event contains 2 fields
1) Data.state: state, with 0,1,2 three states, the approximate process is
--the finger is pressed to start pulling down, has been state 0, this time will trigger multiple pull events. In this state, the drop will automatically recover.
--the finger is pulled down to a certain position and will switch to State 1, which will only trigger once. This state if the finger is not loose, and pull up, and return to the state 0
--at state 1, releasing the finger will switch to state 2, which will only trigger once. This time let go headerview not automatically recover, need rebound method
                             
2) Data.offset: Offset, that is, the height of the drop, if the custom Headerview, can be based on the change in the height of the change to switch some changes, such as constantly switch a picture, continuous transparency changes and so on.


* Push event: Corresponds to Footerview, basic and Headerview exactly the same, except in the opposite direction.


"Method"
rebound: Reset, that is, headerview pull down or footerview pull up after the end of loading data need to explicitly call this method to hide the view reset


We understand it more clearly from the demo.

Let's take a look at an example using the default Headerview and Footerview



"Properties": just set isfootervisible and isheadervisible to true.


"Event":
* Pull event only takes into account the state==2 situation, starts loading network data under State 2, and then updates the listview corresponding Listdata
This HTTP download just simulates a time-consuming network operation with no other meaning


[Mw_shl_code=javascript,true]listview.on ("Pull", function (data) {
if (data.state = = 2) {//pull down to a certain position let's start refreshing the data
Http.download ("Data://temp.png");
}
}) [/mw_shl_code]


then update the data in the HTTP download end callback, reset the Headerview
[Mw_shl_code=javascript,true]http.on ("Success", function (data) {
Listview.rebound ();
Listdata.addone (NewData, 0)
Listview.refreshitems ();
}); [/mw_shl_code]


* Push event is similar, only consider the case of state==2, load a new page of data under state 2, can be local or network

[Mw_shl_code=javascript,true]listview.on ("Push", function (data) {
if (data.state = = 2) {
if (!added) {
Storage.readfile ("Data://do_listview/moremovie.json", function (data, E) {
Listdata.adddata (data);
Listview.refreshitems ();
Added = true;
})
}else{
Nf.toast ("The data is loaded! ")
}

Listview.rebound ();
}
}) [/mw_shl_code]

Source Code reference attachment or Https://github.com/do-project/doDemos/tree/master/do_ListView


Next, implement a custom demo of Footerview and Headerview

customizing Headerview and Footerview
"Introduction"
The final effect is:

* Pull Headerview when the Headerview in the ImageView by a label, pull the transparent value of the label changes, ImageView gradually clear, and finally let go of the time to show an animated selection of ImageView effect , a prompt box pops up after the data is loaded, and the animation is hidden at the end.


* Pull-up Footerview is relatively simple, add a ImageView rotation animation



"Properties": More than the default set of 2 properties
* Headerview:source://do_listview/view/custom_head_foot_view/myheader.ui


* Footerview:source://do_listview/view/custom_head_foot_view/myfooter.ui


"Event": 2 more custom messages triggered on default Mypull and Mypush
[Mw_shl_code=javascript,true]listview.on ("Pull", function (data) {
Page.fire ("Mypull", data);//trigger a custom event to Headerview
if (data.state = = 2) {//pull down to a certain position let's start refreshing the data
Http.download ("Data://temp.png");
}
})
var added = false;
Listview.on ("Push", function (data) {
Page.fire ("Mypush", data);//trigger a custom event to Footerview
if (data.state = = 2) {
if (!added) {
Storage.readfile ("Data://do_listview/moremovie.json", function (
Data, E) {
Listdata.adddata (data);
Listview.refreshitems ();
Added = true;
})
} else {
Nf.toast ("The data is loaded! ")
}

Listview.rebound ();
}
}) [/mw_shl_code]


Subscribe to this mypull message in Myheader.ui.js, and handle it separately in state for 0,1,2 three cases


[Mw_shl_code=javascript,true]var page = SM ("Do_page");
Page.On ("Mypull", function (data) {
if (data.state = = 2) {
Anim_imageview.animate (ANIM);
Anim_imageview.visible = true;
Imageview.visible = false;
Label.text = "Refresh in ...";
} else {
Anim_imageview.visible = false;
Imageview.visible = true;
var alpha = 200-2 * Math.ceil (Data.offset);
if (Alpha < 0)
Alpha = 0;
if (Alpha < 16)
Cover.bgcolor = "0000000" + alpha.tostring (16);
Else
Cover.bgcolor = "000000" + alpha.tostring (16);
if (data.state = = 1) {
Label.text = "Let go of the refresh";
} else {//(data.state==0)
Label.text = "drop-down refresh";
}
}
}) [/mw_shl_code]

Source Code reference attachment orHttps://github.com/do-project/doDemos/tree/master/do_ListView

ListView Settings Headerview and Footerview