ListView設(shè)置headerview和footerview

【簡介】
headerview就是通?？吹降哪欠Nlistview手勢下滑露出上面的部分，下拉到一定位置，松手會開始請求網(wǎng)絡(luò)數(shù)據(jù)，然后刷新listview的列表。
footerview一般就是listview手勢一直上滑動到顯示出最后一條數(shù)據(jù)，然后繼續(xù)按住滑動到一定位置，再松手，會加載下一頁的數(shù)據(jù)。
注：除ListView之外，其它像scrollview，webview的header和footer和listview基本一致。

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

* footerView 底部視圖,缺省為空，如果要設(shè)置值，只能設(shè)置成source://開頭的ui文件路徑，比如 "source://view/1.ui"
* headerView 表頭視圖,缺省為空，如果要設(shè)置值，只能設(shè)置成source://開頭的ui文件路徑，比如 "source://view/2.ui"
* isFooterVisible 是否顯示footerview,缺省為false，上滑動到底部是看不到footerview，如果設(shè)置為true，但是footerview屬性為空的話，會出現(xiàn)一個缺省的footerview，應(yīng)付一些常用列表夠用了。如果需要自定義footerview，就需要設(shè)置footerView屬性
* isHeaderVisible 是否顯示headerview，缺省為false，和isFooterVisible原理一致。也有缺省的headerView和可自定義。

【事件】
* pull事件：對應(yīng)的是headerView
事件返回的data包含2個字段
1） data.state :狀態(tài)，有0，1，2 三種狀態(tài)，大概過程是
               -- 手指按下開始往下拉，一直是狀態(tài)0，這個時候會觸發(fā)多次pull事件。這個狀態(tài)下松手就會自動復(fù)原。
               -- 手指下拉到一定位置，會切換到狀態(tài)1，這個只會觸發(fā)一次。這個狀態(tài)如果不松手指，而往上拉，又恢復(fù)到狀態(tài)0
               -- 在狀態(tài)1下，松開手指，會切換到狀態(tài)2，這個只會觸發(fā)一次。這個時候松手headerview不會自動復(fù)原，需要rebound方法

2）data.offset: 偏移量，就是下拉的高度值，如果自定義headerview，可以根據(jù)這個高度值變化來切換一些變化，比如不斷的切換一個圖片，不斷的透明度變化等等。

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

【方法】
rebound：復(fù)位，也就是headerView拉下來或者footerView拉上來之后加載數(shù)據(jù)結(jié)束需要顯式的調(diào)用這個方法讓view復(fù)位隱藏

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

成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)公司是一家服務(wù)多年做網(wǎng)站建設(shè)策劃設(shè)計(jì)制作的公司,為廣大用戶提供了成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站，成都網(wǎng)站設(shè)計(jì)，一元廣告，成都做網(wǎng)站選成都創(chuàng)新互聯(lián)公司，貼合企業(yè)需求，高性價比，滿足客戶不同層次的需求一站式服務(wù)歡迎致電。

先來看一個使用缺省的headerview和footerview的例子
ListView設(shè)置headerview和footerview

【屬性】：只需設(shè)置isFooterVisible和isHeaderVisible為true就可以了

【事件】：
* pull事件只需考慮state==2的情況就可以了，在狀態(tài)2下開始加載網(wǎng)絡(luò)數(shù)據(jù)，然后更新listview對應(yīng)的listdata
這個http的下載只是模擬一個耗時的網(wǎng)絡(luò)操作，沒有其它意義

[mw_shl_code=javascript,true]listview.on("pull", function(data) {
      if (data.state == 2) {// 下拉到一定位置松手開始刷新數(shù)據(jù)
            http.download("data://temp.png");
      }
})[/mw_shl_code]

然后在http下載結(jié)束回調(diào)里更新數(shù)據(jù)，復(fù)位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的情況，在狀態(tài)2下加載新一頁的數(shù)據(jù)，可以是本地的也可以是網(wǎng)絡(luò)的

[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("數(shù)據(jù)已加載完！")
            }

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

源代碼參考附件或者h(yuǎn)ttps://github.com/do-project/doDemos/tree/master/do_ListView

接下來實(shí)現(xiàn)一個自定義的footerview和headerview的demo

自定義headerview和footerview
【簡介】
最后效果是：

* 下拉h(huán)eaderview的時候headerview里的p_w_picpathview被一個label蓋住，拉的過程中l(wèi)abel的透明值變化，p_w_picpathview逐漸清晰，最后松手的時候顯示一個動畫選擇的p_w_picpathview效果，加載數(shù)據(jù)結(jié)束后彈出一個提示框，最后再動畫消隱。

* 上拉footerview比較簡單，就加一個p_w_picpathview的旋轉(zhuǎn)動畫
ListView設(shè)置headerview和footerview

【屬性】：比缺省的多設(shè)置2個屬性
* headerView：source://do_ListView/view/custom_head_foot_view/myheader.ui

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

【事件】：在缺省的基礎(chǔ)上再觸發(fā)2個自定義消息mypull和mypush
[mw_shl_code=javascript,true]listview.on("pull", function(data) {
      page.fire("mypull", data);//觸發(fā)一個自定義事件給headerview
      if (data.state == 2) {// 下拉到一定位置松手開始刷新數(shù)據(jù)
            http.download("data://temp.png");
      }
})
var added = false;
listview.on("push", function(data) {
      page.fire("mypush", data);//觸發(fā)一個自定義事件給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("數(shù)據(jù)已加載完！")
            }

            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_p_w_picpathview.animate(anim);
            anim_p_w_picpathview.visible = true;
            p_w_picpathview.visible = false;
            label.text = "刷新中...";
      } else {
            anim_p_w_picpathview.visible = false;
            p_w_picpathview.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]

源代碼參考附件或者h(yuǎn)ttps://github.com/do-project/doDemos/tree/master/do_ListView

當(dāng)前標(biāo)題：ListView設(shè)置headerview和footerview
路徑分享：http://muchs.cn/article44/pgodee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供虛擬主機(jī)、自適應(yīng)網(wǎng)站、營銷型網(wǎng)站建設(shè)、手機(jī)網(wǎng)站建設(shè)、ChatGPT、網(wǎng)站改版

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容