ListView

H5 ListView Component By Virtual DOM And No Need Set Item Height
H5 ListView组件，支持超大数据列表流畅运行。子项无需指定高度
GitHub Pages: https://github.com/fengshangbin/ListView

设计理念

不依赖第三方框架，也无不侵入，GZip后只有3KB，类似安卓原生ListView的使用方式。

特点及优势

大数据列表（采用虚拟DOM防止大数据列表下手机内存不够）
不定高子项（无需给子项设置指定高度）
集成顶部上滑或底部下滑 Loading更多数据
仿安卓原生ListView的使用方式，使用简单

如何使用

页面定义ListView容器

<div id="container"></div>

引入js文件

<script src="c3listview.js"></script>

定义一个数据源

var dataSource = [1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4,1,2,3,4];
var adapter = new C3ListView.adapter(dataSource);//参数为数组，可选

定义子项html视图

adapter.getHtml = function(position){var data = adapter.getData(position);return "<div data-position=\""+position+"\">"+data+"</div>";
}

关联ListView容器

/*container: ListView子项的容器adapter: 数据源scrollParent: 滚动条所属容器，可选，默认为window
*/var ct = document.getElementById("container");
var listView = new C3ListView.builder(ct, adapter);

这样就可以运行ListView了
示例
示例二维码

更多功能

设置数据loading视图

<script type="text/x-template" id="template-loading"><svg viewBox="0 0 50 50" class="loading"><defs><linearGradient id="linear" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" stop-color="#000" stop-opacity="1.0" /><stop offset="90%" stop-color="#000" stop-opacity="0" /></linearGradient></defs><circle cx="25" cy="25" r="20" stroke-width="5" stroke="url(#linear)" fill="none" /></svg>
</script>

adapter.getLoadingHtml = function(){return document.getElementById("template-loading").innerHTML;
}

设置到底下滑添加数据

listView.addEventListener("touchbottom",function(e){ //顶部上滑对应touchtopconsole.log("touchbottom");window.setTimeout(function(){adapter.appendData([1,2,3,4]);},2000);
});

设置当前为最后一页

adapter.isLastPage = true; //第一页对应isFirstPage

设置/重置数据源

adapter.setData([1,2,3,4,1,2,3,4])

向前追加数据

adapter.preAppendData([1,2])

向后追加数据

adapter.appendData([1,2])

更新数据

/*data: 新数据position: 被更新子项的索引
*/adapter.updateData(4,0)

更新子项视图

adapter.updateView(view) //触发重新计算view的高度

删除数据

adapter.removeData(0) //参数为被删除子项的索引

获取数据

adapter.getData(0) //参数为子项的索引

许可

MIT许可

本文来源 http://www.fengshangbin.com/listview/

H5 ListView组件相关推荐

android的listView组件
关于Android ListView组件中android:drawSelectorOnTop含义 android:drawSelectorOnTop="true" 点击某一条记录 ...
为ListView组件加上快速滑块以及修改快速滑块图像
本文转载自:http://blog.csdn.net/ouyang_peng/article/details/46919723 作者:欧阳鹏欢迎转载,与人分享是进步的源泉! 转载请保留原文地址:h ...
UI组件之AdapterView及其子类（五）ListView组件和ListActivity
ListView组件是一个显示组件,继承AdapterView基类,前面已经介绍了分别使用ArrayAdapter,SimpleAdapter,扩展BaseAdapter来为LisView提供列表项h ...
《React Native移动开发实战》一一3.4 完善商品列表——ListView组件
3.4 完善商品列表--ListView组件在完善了搜索框和轮播广告之后,对电商应用的首页的改造已经初见成效.最后,我们要让商品列表的内容也变得更加丰富. 3.4.1 对图片资源进行重构添加商品图 ...
SQLite数据库操作及ListView组件
一.SQLite数据库 1.什么是数据库? 存储大量的相似结构的数据.本质上是一个高效率的文件管理系统.提供快速的增删改查和多并发操作. 常用的数据库有:mysql,oracle,db2,sqlser ...
安卓：ListView组件实现微信通讯录效果（我的王者队友们）
ListView控件是列表视图展示,排列方式是纵向. ListView组件实现微信通讯录效果,包含头像和文字,不能用entries这个属性来添加,要用SimpleAdapter适配器来添加数据布局: ...
Android音乐播放器开发(6)—ListView组件创建歌曲播放列表（内含原理分析）
1. 说明源码已同步到Gitee仓库,GitHub仓库,觉得还不错的话帮忙点个"star"吧,非常感谢. 以往的文章服务端:Android音乐播放器开发–服务端登录:Andr ...
vue3.0 + ts H5拍照组件
vue3.0 + ts H5拍照组件实现了简单的拍照功能,拍照成功返回文件对象.(待更新,裁剪,缩放,旋转) 效果图使用通过npm下载 npm i wl-easy-ui 或者通过yarn add ...
【Flutter 问题系列第 5 篇】Flutter 去除 ListView 组件中的蓝色回弹效果
这是[Flutter 问题系列第 5 篇],如果觉得有用的话,欢迎关注专栏. ListView 组件默认的滑动效果如下可以看到,在顶部向下拖动或者到底部向上拖动时,会有一个蓝色的回弹效果. 这是因为 ...

H5 ListView组件