重写listview下拉时顶部的动画

2年前

重写listview下拉时顶部的动画

访问普元产品知识库(doc.primeton.com),查看本文原文,获得更多普元产品知识,点击此处


//android 

<html>

<head>

 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

</head>

<body>

<nav title="Listview" enableLeft="true" enableRight="true" />

<div width="100%" height="100%" layout="VBox" >

 <listview id="listview" width="100%" height="100%" dividerVisible="true" dividerColor="#D9D9D9" enablePullDown="true" >

 <template >

 <div width="100%" height="80" layout="HBox" vAlign="middle" >

 <img width="50" height="50" tag="icon" marginLeft="5" />

 <input type="label" width="100%" height="100%" tag="name" marginLeft="10" />

   </div>

 </template>

 </listview>

</div>

 <template>

 <div id="scroll_template_div" width="100%" height="60">

 <div layout="VBox" width="360" vAlign="middle" hAlign="center" height="60">

 <label id="scroll_template_label" value="更ddddd多"  fontSize="16" color="#2e3030"/>

   </div>

 </div>

 </template>

</body>

<script>

 Emp.ListView.PrimetonerScroller = Emp.extend(Emp.ListView.DefaultScroller, {

 getHeader : function() {

  var ifEnablePull = this.getListview().content.enablePullDown;

  if (ifEnablePull == true || ifEnablePull == 'true')// 如果设置允许下拉刷新,初始化header隐藏

   this.getListview().setPaddingTop("-80");

  var p = new Emp.Panel({

   height : 80

  });

 

  this.headerContainer = new Emp.Panel({

 "id" : "myhead",

 "hAlign" : "center",

 "layout" : "HBox",

 "width" : "100%",

 "vAlign" : "middle",

 "height" : "100"

 

  });

 

  this.headerIcon = new Emp.WebView({

 "url":"local://gif/sfy.gif",

  });

 

  this.headerContainer.add(this.headerIcon);

  p.add(this.headerContainer);

 return p;

 },

 onStartScrollDown : function() {

 log("start")

  this.headerIcon.setVisibility(true);

 },

 onScrollDown : function(deltaY) {

  log("ddd")

  var y = this.offset - deltaY;

  this.getListview().scrollByY(y);

  this.offset = deltaY;

 },

 

 onEndScrollDown : function() {

 log("end")

  this.scrollDownRelease = true;

 },

 

 onScrollDownRelease : function(deltaY) {

 log("release")

  this.offset = 0;

  if (this.scrollDownRelease == true) {

   this.scrollDownRelease = false;

   this.isScrollDownRelease = false

 

   this.getListview().scrollToY(-80);

 

 // this.headerContainer.moveToY(0,500);

  } else {

   if (this.isScrollDownRelease == true) {

    this.isScrollDownRelease = false

 // this.headerContainer.moveToY(-80,500);

    this.getListview().scrollToY(-1);

   }

  }

 

  /*

   * if (deltaY >= 0) this.headerContainer.setHeight(deltaY + "px") else

   * this.headerContainer.setVisibility(false);

   */

 },

 onLoadMore : function(type) {

 log("more")

  if (type == "pullDown") {

   var scroller = this

   setTimeout(500, function() {

    scroller.fireLoadMore("pullDown");

   })

 

 

  } else {

 return false;

  }

 }

 

 });

 

 var newsScroller =  new Emp.ListView.PrimetonerScroller({"modelId" : this.modelId});

 listview.setScroller(newsScroller);

 

$M.page.addEvent('onLoad', loadData);

 

function loadData(args){

 //listview在进行数据填充时会将每项中对应tag的值回填到相应的控件上

 var items = [

  {'icon':'/images/app.png', 'name':'普元上海总部'},

  {'icon':'/images/app.png', 'name':'普元北京研发'},

  {'icon':'/images/app.png', 'name':'普元西安研发部'},

  {'icon':'/images/app.png', 'name':'普元广州研发部'},

  {'icon':'/images/app.png', 'name':'普元深圳分部'},

  {'icon':'/images/app.png', 'name':'普元武汉分部'},

  {'icon':'/images/app.png', 'name':'普元成都分部'},

  {'icon':'/images/app.png', 'name':'普元南京分部'}

 ];

 

 //设置listview需要展现的数据项

 listview.setItems(items);

 

 //调用reloadData()重绘UI

 listview.reloadData();

}

 

listview.addEvent("onLoadMore", function(args){

 listview.reloadData();

});

 

listview.addEvent("onItemClick", function(row, tag, data){

 alert("ItemClicked");

});

 

</script>

</html>



//ios

listviewheader.htmlx


COMMENTS

需要 后方可回复
如果没有账号可以 一个帐号。