ListView設定headerview和footerview

標籤：js   app   移動app   移動開發   

【簡介】
headerview就是通常看到的那種listview手勢下滑露出上面的部分，下拉到一定位置，鬆手會開始請求網路資料，然後重新整理listview的列表。
footerview一般就是listview手勢一直上滑動到顯示出最後一條資料，然後繼續按住滑動到一定位置，再鬆手，會載入下一頁的資料。
註：除ListView之外，其它像scrollview，webview的header和footer和listview基本一致。


【屬性】
do平台的listview有4個屬性來控制headerview和footview


* footerView        底部視圖,預設為空白，如果要設定值，只能設定成source://開頭的ui檔案路徑，比如 "source://view/1.ui"
* headerView        表頭視圖,預設為空白，如果要設定值，只能設定成source://開頭的ui檔案路徑，比如 "source://view/2.ui"
* isFooterVisible        是否顯示footerview,預設為false，上滑動到底部是看不到footerview，如果設定為true，但是footerview屬性為空白的話，會出現一個預設的footerview，應付一些常用列表夠用了。如果需要自訂footerview，就需要設定footerView屬性
* isHeaderVisible        是否顯示headerview，預設為false，和isFooterVisible原理一致。也有預設的headerView和可自訂。


【事件】
* pull事件：對應的是headerView
事件返回的data包含2個欄位
1） data.state :狀態，有0，1，2 三種狀態，大概過程是
                 -- 手指按下開始往下拉，一直是狀態0，這個時候會觸發多次pull事件。這個狀態下鬆手就會自動複原。
                 -- 手指下拉到一定位置，會切換到狀態1，這個只會觸發一次。這個狀態如果不鬆手指，而往上拉，又恢複到狀態0
                 -- 在狀態1下，鬆開手指，會切換到狀態2，這個只會觸發一次。這個時候鬆手headerview不會自動複原，需要rebound方法
                             
2）data.offset: 位移量，就是下拉的高度值，如果自訂headerview，可以根據這個高度值變化來切換一些變化，比如不斷的切換一個圖片，不斷的透明度變化等等。


* push事件：對應的是footerView，基本和headerview完全一樣，只不過是方向相反。


【方法】
rebound：複位，也就是headerView拉下來或者footerView拉上來之後載入資料結束需要顯式的調用這個方法讓view複位隱藏


我們從demo上理解會更清楚一些。

 

先來看一個使用預設的headerview和footerview的例子
650) this.width=650;" src="http://bbs.deviceone.net/forum.php?mod=image&aid=1116&size=300x300&key=0cbc6ea7469d36b5&nocache=yes&type=fixnone" width="300" border="0" style="border:0px;" />650) this.width=650;" src="http://bbs.deviceone.net/forum.php?mod=image&aid=1115&size=300x300&key=153f05042a4f3d48&nocache=yes&type=fixnone" width="300" border="0" style="border:0px;" />


【屬性】：只需設定isFooterVisible和isHeaderVisible為true就可以了


【事件】：
* pull事件只需考慮state==2的情況就可以了，在狀態2下開始載入網路資料，然後更新listview對應的listdata
這個http的下載只是類比一個耗時的網路操作，沒有其它意義


[mw_shl_code=javascript,true]listview.on("pull", function(data) {
        if (data.state == 2) {// 下拉到一定位置鬆手開始重新整理資料
                http.download("data://temp.png");
        }
})[/mw_shl_code]


然後在http下載結束回調裡更新資料，複位headerview
[mw_shl_code=javascript,true]http.on("success", function(data) {
        listview.rebound();
        listdata.addOne(newdata, 0)
        listview.refreshItems();
});[/mw_shl_code]


* push事件類別似，只考慮state==2的情況，在狀態2下載入新一頁的資料，可以是本地的也可以是網路的

[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("資料已載入完！")
                }

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

原始碼參考附件或者https://github.com/do-project/doDemos/tree/master/do_ListView


接下來實現一個自訂的footerview和headerview的demo

 

自訂headerview和footerview
【簡介】
最後效果是：

* 下拉headerview的時候headerview裡的imageview被一個label蓋住，拉的過程中label的透明值變化，imageview逐漸清晰，最後鬆手的時候顯示一個動畫選擇的imageview效果，載入資料結束後彈出一個提示框，最後再動畫消隱。


* 上拉footerview比較簡單，就加一個imageview的旋轉動畫
650) this.width=650;" src="http://bbs.deviceone.net/forum.php?mod=image&aid=1118&size=300x300&key=093124532205b89b&nocache=yes&type=fixnone" width="300" border="0" style="border:0px;" />650) this.width=650;" src="http://bbs.deviceone.net/forum.php?mod=image&aid=1121&size=300x300&key=904897d100b046c8&nocache=yes&type=fixnone" width="300" border="0" style="border:0px;" />


【屬性】：比預設的多設定2個屬性
* headerView：source://do_ListView/view/custom_head_foot_view/myheader.ui


* footerView： source://do_ListView/view/custom_head_foot_view/myfooter.ui


【事件】：在預設的基礎上再觸發2個自訂訊息mypull和mypush
[mw_shl_code=javascript,true]listview.on("pull", function(data) {
        page.fire("mypull", data);//觸發一個自訂事件給headerview
        if (data.state == 2) {// 下拉到一定位置鬆手開始重新整理資料
                http.download("data://temp.png");
        }
})
var added = false;
listview.on("push", function(data) {
        page.fire("mypush", data);//觸發一個自訂事件給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("資料已載入完！")
                }

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


在myheader.ui.js裡訂閱這個mypull訊息，在state為0，1，2三種情況下分別處理


[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 = "重新整理中...";
        } 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 = "鬆手開始重新整理";
                } else { // (data.state==0)
                        label.text = "下拉重新整理";
                }
        }
})[/mw_shl_code]

原始碼參考附件或者https://github.com/do-project/doDemos/tree/master/do_ListView

本文出自 “felix” 部落格，請務必保留此出處http://jonhfelix.blog.51cto.com/630359/1713452

ListView設定headerview和footerview