ListView创建选择条目，并且在另一处显示该选择

最新推荐文章于 2022-09-25 13:08:08 发布

火把水逗笑

最新推荐文章于 2022-09-25 13:08:08 发布

阅读量110

点赞数

文章标签： js ListView 按钮点击

本文链接：https://blog.csdn.net/weixin_43907572/article/details/102701928

版权

ListView创建选择条目，并且在另一处显示该选择

需求描述：用ListView展示所有可选择的人物头像背景，点击其中一个背景后，相应的头像背景也改变

步骤：

1、在cocosStucio中拼好界面，这里就不详细说明，注意的一点是ListView的大小要和里面的选项大小适配，否则会出现滑起来很奇怪的问题，

2、思路是：用一个for循环创建按钮，并为其添加点击事件，因为要点击它切换头像背景。在此注意一点，js是可以给该按钮添加属性的，因为之前一直用c、c++、lua，所以不晓得这一点，js中，按钮也是一个JSON对象，所以可以为其添加属性。接着克隆在cocosStudio中在ListView里拼的供选择的背景，然后调用pushBackCustomItem(),把克隆的内容加入ListView。

下面贴上代码供参考：

showListView:function () {
    this.listBtns = [];
    this.selectIndex = 0;
    var path = ".........";
    for(var i = 0; i < 6; i++){
        var item = this.selectItem.clone();
        var btnSelectBg = item.getChildByName("btn_select_bg");

        var select_img = item.getChildByName("select_img");
        select_img.setVisible(false);

        var btn = new ccui.Button(path + i + ".png");
        btn.setScaleX(0.22);
        btn.setScaleY(0.27);
        btn.setAnchorPoint(0.5,0.5);
        btn.x = btnSelectBg.width / 2;
        btn.y = btnSelectBg.height / 2;
        btn.addClickEventListener(this.onSelectQrcodeBg.bind(this));
        btn.select_img = select_img;
        btn.index = i;
        this.listBtns.push(btn);

        btnSelectBg.addChild(btn);
        this.listView.pushBackCustomItem(item);
    }

    this.setBtnSelect(this.selectIndex);
},

onSelectQrcodeBg:function (obj) {
    this.setBtnSelect(obj.index);
},

setBtnSelect:function (index) {
    for(var i = 0; i < this.listBtns.length; i++){
        var btn = this.listBtns[i];
        if(i == index){
            btn.select_img.setVisible(true);
        }else{
            btn.select_img.setVisible(false);
        }
    }
    this.refQrcodeBg(index);
},

refQrcodeBg:function (index) {
    var path = ".........";
    var bg = this.getChildFromRoot("Image_2");
    var sprite = new cc.Sprite(path + index + ".png");
    sprite.setAnchorPoint(0.5,0.5);
    sprite.x = bg.width / 2;
    sprite.y = bg.height / 2;
    bg.addChild(sprite);
},