cocos-js listview笔记

最新推荐文章于 2023-10-06 23:26:27 发布

Leo丶Tiny

最新推荐文章于 2023-10-06 23:26:27 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： cocos-js

本文链接：https://blog.youkuaiyun.com/u012897554/article/details/52086143

cocos-js 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用cocos-js创建并配置ListView。内容包括设置方向、触摸响应、添加默认和自定义项，以及监听列表选择事件。示例代码详细展示了创建一个垂直滚动列表并插入20个条目的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

var HelloWorldLayer = cc.Layer.extend({
    sprite:null,
    ctor:function () {

        this._super();
        var listView = new ccui.ListView();
        // set list view ex direction
        listView.setDirection(ccui.ScrollView.DIR_VERTICAL);
        listView.setTouchEnabled(true);
        listView.setBounceEnabled(true);
        listView.setContentSize(cc.size(240, 130));
        listView.x = 200;
        listView.y =200;
        listView.addEventListener(this.selectedItemEvent, this);
        this.addChild(listView);

        var default_item = new ccui.Layout();
        default_item.setTouchEnabled(true);
        default_item.setContentSize(cc.size(300,30));
        default_item.width = listView.width;
        //default_item.addChild(default_button);
        // set model
        listView.setItemModel(default_item);

        for (var i = 0; i < 20; ++i) {
            listView.pushBackDefaultItem();//注意这一行，相当重要！！！
	//如果不写这一句，就不会触发listview的监听事件
        }

        for(var i=0;i<20;i++){
            var lblMenu=new cc.LabelTTF(i.toString(),"Arial",36);
            var lblLayer=new ccui.Layout();
            lblMenu.setContentSize(cc.size(100,30));
            lblMenu.width=80;
            lblMenu.x=50;
            lblMenu.y=-30*i;
            lblLayer.addChild(lblMenu);
            listView.insertCustomItem(lblLayer);
        }
        // 设置重力，不知道有什么用，注释后无影响
        listView.setGravity(ccui.ListView.GRAVITY_CENTER_VERTICAL);
    },
    selectedItemEvent: function (sender, type) {
        cc.log("type:"+type);//type类型为0,1
        switch (type) {
            case ccui.ListView.EVENT_SELECTED_ITEM://选中item项
                var listViewEx = sender;
                cc.log("select child index = " + listViewEx.getCurSelectedIndex());
                break;
            case ccui.ListView.ON_SELECTED_ITEM_END://单击ITEM项（没有拉动列表滚动）
                cc.log("ccui.ListView.ON_SELECTED_ITEM_END");
                break;
            default:
                break;
        }
    }
});