cocosCreator---listview

分享总结与感受，欢迎大家交流学习
listView实用性很强，游戏中排行榜，领取奖励列表等等，都能用的上。除了游戏之外其他的app、web都会用的上，下面会讲用cocosCreator实现的，其实用其他的语言、引擎、ui库也都是一样的道理，重在思想。
在设计的时候，1.要考虑一次加载过多卡顿的问题 2.滑动流畅问题
解决方式：1.创建出有限个item 2.通过滑动后在判断将有限个item放在滑动方向的反方向（向上滑，会将最上面的item位置放在最下面）3.其中有一个缓存区空间的概念，在content外，交换位置都在缓存区中变化，没有缓存区域看着就会不流畅

下面的例子主要在cocoscreator中实现
实现功能：
1.实际生成20个item，显示30个数据或者更多
2.添加新item
3.删除item，但总数据不会小于30个
4.将listview滑动到指定的y=500的位置上

上，码

listviewCtl.js

cc.Class({
   
    extends: cc.Component,

    properties: {
   
        itemTemplate: {
    // item template to instantiate other items
            default: null,
            type: cc.Node
        },
        scrollView: {
   
        	default: null,
        	type: cc.ScrollView
        },
        spawnCount: 0, // how many items we actually spawn 实际生成item
        totalCount: 0, // how many items we need for the whole list 显示信息总数
        spacing: 0, // space between each item 每个item之间间隔
        bufferZone: 0, // when item is away from bufferZone, we relocate it 缓冲区
        lblScrollEvent: cc.Label,
        btnAddItem: cc.Button,
        btnRemoveItem: cc.Button,
        btnJumpToPosition: cc.Button,
        lblJumpPosition: cc.Label,
        lblTotalItems: cc.Label,
    },

    // use this for initialization
    onLoad: function () {
   
    	this.content = this.scrollView.content;
        this.items = []; // array to store spawned items
    	this.initialize();
        this.updateTimer = 0;
        this.updateInterval = 0.2;
        this.lastContentPosY = 0; // use this variable to detect if we are scrolling up or down
    },

    initialize: function () {
   
        this.content.height = this.totalCount * (this.itemTemplate.height + this.spacing) + this.spacing; // get total content height
    	for (let i = 0; i < this.spawnCount; ++i) {
    // spawn items, we only need to do this once
    		let item = cc.instantiate(this.itemTemplate);
    		this.content.addChild(item);
    		item.setPosition(0, -item