ListItem的设置

ListItem的设置是ScrollView和自定义每行Item的结合

1、创建一个ScrollView

2、创建一个节点Templates

3、在Templates创建一个精灵Item，该节点存放的东西为每行类似的东西，比如每行都有用户名和俱乐部ID等等，在精灵Item上可以添加精灵Sprite和文本Label。

4、创建一个脚本Item并且精灵Item控件关联这个脚本，

const i18n = require('i18n');

cc.Class({

    extends: cc.Component,

    properties: {

        label: {

            default: null,

            type: cc.Label

        },

        itemID: 0

    },

    onLoad: function () {

        this.node.on('touchend', function () {

            console.log("Item " + this.itemID + ' clicked');

        }, this);

    },

    updateItem: function(tmplId, itemId) {

        this.itemID = itemId;

        this.label.textKey = i18n.t("cases/02_ui/05_scrollView/Item.js.1") + tmplId + ' Item#' + this.itemID;

    },

});

5、脚本和编辑器设置一些属性(总共多少项、)

 

properties：{

        itemTemplate: { // item template to instantiate other items

            default: null,

            type: cc.Node

        },

 

        spawnCount: 0, // how many items we actually spawn

        totalCount: 0, // how many items we need for the whole list

        spacing: 0, // space between each item

        bufferZone: 0, // when item is away from bufferZone, we relocate it

        lblScrollEvent: cc.Label,

},

onLoad:function(){

this.content = this.scrollView.content;

this.items = []; // array to store spawned items
         this.lastContentPosY = 0;

this.initialize();

},

initialize: function () {

        this.content.height = this.totalCount * (this.itemTemplate.height + this.spacing) + this.spacing; // get total content height

         for (let i = 0; i < this.totalCount; ++i) { // spawn items, we only need to do this once

                   let item = cc.instantiate(this.itemTemplate);

                   this.content.addChild(item);

                   item.setPosition(0, -item.height * (0.5 + i) - this.spacing * (i + 1));

                   item.getComponent('Item').updateItem(i, i);

            this.items.push(item);

         }

},