【簡介】
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上理解會更清楚一些。

創新互聯服務項目包括獻縣網站建設、獻縣網站制作、獻縣網頁制作以及獻縣網絡營銷策劃等。多年來，我們專注于互聯網行業，利用自身積累的技術優勢、行業經驗、深度合作伙伴關系等，向廣大中小型企業、政府機構等提供互聯網行業的解決方案，獻縣網站推廣取得了明顯的社會效益與經濟效益。目前，我們服務的客戶以成都為中心已經輻射到獻縣省份的部分城市，未來相信會繼續擴大服務區域并繼續獲得客戶的支持與信任！

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

【事件】：

      if (data.state == 2) {// 下拉到一定位置松手開始刷新數據
          /upload/otherpic36/temp.png");
      }
})[/mw_shl_code]

      listview.rebound();
      listdata.addOne(newdata, 0)
      listview.refreshItems();
});[/mw_shl_code]

[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]

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

* 下拉headerview的時候headerview里的p_w_picpathview被一個label蓋住，拉的過程中label的透明值變化，p_w_picpathview逐漸清晰，最后松手的時候顯示一個動畫選擇的p_w_picpathview效果，加載數據結束后彈出一個提示框，最后再動畫消隱。

* 上拉footerview比較簡單，就加一個p_w_picpathview的旋轉動畫


【屬性】：比缺省的多設置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) {// 下拉到一定位置松手開始刷新數據
          /upload/otherpic36/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_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]

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

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網站標題：ListView設置headerview和footerview-創新互聯
分享URL：http://www.yijiale78.com/article40/ceiieo.html

成都網站建設公司_創新互聯，為您提供ChatGPT、搜索引擎優化、品牌網站建設、虛擬主機、小程序開發、域名注冊

廣告

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