ListViewDemo.zip (933.6 KB)
-
Cocos编辑器中的用法:
ListView组件需要借助ScrollView组件进行滚动显示.不需要自造轮子进行滚动逻辑.
同时ListView 需要将待显示的Item 制成预制体.以便动态生成列表项.
如下:
设置好以上参数后即可进行数据显示了.
其他参数解释: Spacing 用来约定item 之间的间距. SpawnCount 用来约定超过可见区域的额外显示项数,可以调整滚动时的平滑性.
另外直接设置ScrollView组件的滚动方向,即可自动适配 竖向/横向滚动. -
代码中使用:
要显示列表数据, 你需要准备一个 数据列表/数组, 如: let ranks = [100,200,300],
另外,你需要一个数据到Item的适配层. ListView 组件类中提供了一个基类AbsAdapter, 你只需要继承此类,重写updateView()函数,对相应索引的itemComponent进行数据初始化即可. 示例:export default class RankListAdapter extends AbsAdapter {
constructor() {
super(RankItemComponent);
}public updateView(item: RankItemComponent, posIndex: number) {
const data = this.getItem(posIndex);
item.setRankInfo(data);
} }
}
其中RankItemComponent 即对应挂载在 Item预置体中的组件类型. -
数据显示和更新::
初始数据显示代码示例:private initGlobalRankList(items: RankInfo[]) {
let adapter = new RankListAdapter()
adapter.setDataSet(items)
this.globalRankView.setAdapter(adapter);
}
}
数据更新示例:
数据更新,只需要重复调用 adapter.setDataSet()设置更新数据,即可:
{
this.adapter.setDataSet(newData);
this.globalRankView.notifyUpdate()
// 可向其中传递[number] 数组,用于仅刷新其中某几项内容.而非整体刷新显示.
}
-
上拉/下拉通知.
ListView 组件设计了简单的上/下拉通知. 只需要初始化时设置相应回调方法即可. 具体可参看源码. -
Js 代码中使用.
此类以 TS 写成, 但很多同学喜欢JS的放荡不ji, 能否在js中使用此组件呢. 同样是可以的.
不需要任何大的修改即可直接使用. -
引用的偌中需要 通过require(),引入ListView.
-
Adapter的继承方式改为 cc.Class.extends({}) 即可.
有了此神器, 再也不用为 一次性显示几百几千条数据头疼了. 再也不用设计复杂的翻页逻辑了.
V1.1
- 修复横向滚动ListView 布局bug.
- 修复@shern 反馈的 数据重置时数据多显示一条的问题.
最新实现可以在Demo中找到并拷贝使用.