资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

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上理解会更清楚一些。

创新互联服务项目包括献县网站建设、献县网站制作、献县网页制作以及献县网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,献县网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到献县省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

ListView设置headerview和footerview

【属性】:只需设置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的旋转动画
ListView设置headerview和footerviewListView设置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) {// 下拉到一定位置松手开始刷新数据
          /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://cdkjz.cn/article/ceiieo.html
多年建站经验

多一份参考,总有益处

联系快上网,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

大客户专线   成都:13518219792   座机:028-86922220