ListView设置headerview和footerview

【简介】
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的例子
ListView设置headerview和footerview

【属性】：只需设置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里的p_w_picpathview被一个label盖住，拉的过程中label的透明值变化，p_w_picpathview逐渐清晰，最后松手的时候显示一个动画选择的p_w_picpathview效果，加载数据结束后弹出一个提示框，最后再动画消隐。

* 上拉footerview比较简单，就加一个p_w_picpathview的旋转动画
ListView设置headerview和footerview

【属性】：比缺省的多设置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_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

名称栏目：ListView设置headerview和footerview
分享地址：http://ybzwz.com/article/pgodee.html

ListView设置headerview和footerview

其他资讯