Listview的上拉加载更多和下拉刷新demo示例代码

最新推荐文章于 2022-11-02 09:55:00 发布

郝振明

最新推荐文章于 2022-11-02 09:55:00 发布

阅读量871

点赞数

分类专栏： Listview的使用文章标签：普元移动平台 listview 上拉加载更多和下拉刷新示例

本文链接：https://blog.csdn.net/haozhenming/article/details/53582349

版权

Listview的使用专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

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

<listview id="listview" width="100%" height="100%" dividerVisible="true" dividerColor="#D9D9D9" enablePullDown="true" enablePullUp="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>

</body>
<script>
var items = null;
$M.page.addEvent('onLoad', function(params){
  
  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':'普元信息技术股份有限公司'},
    {'icon':'/images/app.png', 'name':'普元信'},
    {'icon':'/images/app.png', 'name':'aaaa份有限公司'},
    {'icon':'/images/app.png', 'name':'sdfsfds术股份有限公司'},
    {'icon':'/images/app.png', 'name':'普ooooo术股份有限公司'},
  ];
  
  //设置listview需要显示的数据项
  listview.setItems(items);
  
  //调用reloadData()重绘UI
  listview.reloadData();
    
});

//给listview添加上拉、下拉事件监听. listview必须在设置enablePullDown或enablePullUp为true的情况下该事件才生效
listview.addEvent('onLoadMore', function(action){
  var newItems = [
    {'icon':'/images/app.png', 'name':'张家辉'},
    {'icon':'/images/app.png', 'name':'刘德华'},
    {'icon':'/images/app.png', 'name':'胡歌'},
    {'icon':'/images/app.png', 'name':'张震'}
  ];
  if(action == 'pullDown'){
     //下拉刷新
     listview.setItems(items);
     listview.reloadData();
     
    }else if(action == 'pullUp'){
    //上划加载更多
    
    //使用定时器是为了模拟网络延时的情况
    setTimeout(function(){
      listview.appendItems(newItems);
      listview.reloadData();
    }, 1000)
    
  }
  
  
});

</script>
</html>

郝振明

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Listview的上拉加载更多和下拉刷新demo示例代码

var items = null;$M.page.addEvent('onLoad', function(params){ items = [ {'icon':'/images/app.png', 'name':'普元信息技术股份有限公司'}, {'icon':'/images/app.png', 'name':'普元信息技术股份有限公司'}, {'icon':
复制链接

扫一扫

专栏目录