贡献一个自定义ListView 实现, 高效复用机制以及便捷的使用接口

ListViewDemo.zip (933.6 KB)

  1. Cocos编辑器中的用法:
    ListView组件需要借助ScrollView组件进行滚动显示.不需要自造轮子进行滚动逻辑.
    同时ListView 需要将待显示的Item 制成预制体.以便动态生成列表项.
    如下:

    设置好以上参数后即可进行数据显示了.
    其他参数解释: Spacing 用来约定item 之间的间距. SpawnCount 用来约定超过可见区域的额外显示项数,可以调整滚动时的平滑性.
    另外直接设置ScrollView组件的滚动方向,即可自动适配 竖向/横向滚动.

  2. 代码中使用:
    要显示列表数据, 你需要准备一个 数据列表/数组, 如: 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预置体中的组件类型.

  3. 数据显示和更新::
    初始数据显示代码示例:

    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] 数组,用于仅刷新其中某几项内容.而非整体刷新显示.
}

  1. 上拉/下拉通知.
    ListView 组件设计了简单的上/下拉通知. 只需要初始化时设置相应回调方法即可. 具体可参看源码.

  2. Js 代码中使用.
    此类以 TS 写成, 但很多同学喜欢JS的放荡不ji, 能否在js中使用此组件呢. 同样是可以的.
    不需要任何大的修改即可直接使用.

  3. 引用的偌中需要 通过require(),引入ListView.

  4. Adapter的继承方式改为 cc.Class.extends({}) 即可.

有了此神器, 再也不用为 一次性显示几百几千条数据头疼了. 再也不用设计复杂的翻页逻辑了.

V1.1

  1. 修复横向滚动ListView 布局bug.
  2. 修复@shern 反馈的 数据重置时数据多显示一条的问题.
    最新实现可以在Demo中找到并拷贝使用.
36赞

mark一下

感觉像是参照了android listview的实现

顶你一下

对的.

先mark再说…

1赞

就把ListView.zip 下载解压. 然后放到工程里, 然后节点树上建个空节点, 并把ListView组件拖拽到节点上就完了啊… 跟普通组件使用方法没区别的啊…

嗯,搞定了,项目不是ts的,拖入ts脚本总自动生成一堆东西报错。我已经改为js版本实现了

能上传个demo么

js版的可以上传一下吗,大兄弟@sky068

上传ListView 的使用Demo. 里边包含TS 和JS 的 使用方法, 分为两个Demo工程.
ListViewDemos.zip (481.7 KB)

工程运行截图:

场景节点树:

TS 工程使用截图:

JS 工程使用截图:

**

注意: 如果在Webstorm中 有提示 是否将ts 转成 js 的地方, 一定要否掉, 否掉, 否掉. TS 工程千万不要自动转换JS. 否则会出现重名类.

**

JS/TS demo n已上传

楼主好人,赞一个

请问是否支持不定尺寸的item?

使用封装的组件,如果要想实现item点击监听如何实现呢?

mark 学习一下

暂时不支持哈. 布局的时候是提前计算好每个item的偏移进行虚拟布局的. 即使是不定尺寸的布局, 也是需要能提前能够获取到每个 item的 高度/宽度 才行. 但 同一个预置体在没有初始化时,你无法获取到这个item 将会多高.

mark

mark

正准备参照Android的ListView写一个,逛论坛就看到你了:joy:@andrewlu