如何动态删除彼此堆叠的imageViews

时间:2014-05-22 20:58:23

标签: uiimageview titanium-mobile

我尝试了以下代码,我尝试的任务是首先使用图像堆栈填充窗口,然后每次单击一个时,它会逐个删除它。

var colors = ['red', 'blue', 'yellow', 'green', 'gray', 'black'];

    for (var i in colors) {

        var image = Titanium.UI.createImageView({
            backgroundColor : colors[i],
            top : 50,
            left : 30,
            width : 200,
            height : 200
        });

        $.win.add(image);
    }

    image.addEventListener('click', function(e) {
        alert(e);
        alert(JSON.stringify(e.source));
        $.win.remove(image);
    });

然后当他们点击每张图片时,它会从窗口中删除 - 然后显示下一张图片。

事件侦听器适用于第一个图像视图,但随后停止使用底层视图。

我知道这可以通过scrollableView轻松完成,但我想尝试使用图像View堆栈来完成。

干杯。

2 个答案:

答案 0 :(得分:0)

你必须把事件监听器放在循环中!

   var colors = ['red', 'blue', 'yellow', 'green', 'gray', 'black'];
   for (var i in colors) {
      var image = Titanium.UI.createImageView({ 
           backgroundColor : colors[i],
           top : 50, 
           left : 30,
           width : 200,
           height : 200
         }); 
    //this is what you should do 
    image.addEventListener('click', function(e) { 
             alert(e); alert(JSON.stringify(e.source)); $.win.remove(image);
         });
    $.win.add(image); 
}

答案 1 :(得分:0)

试试这个:

var colors = ['red', 'blue', 'yellow', 'green', 'gray', 'black'];

function imageHandler(_imgObj,_win)
{
    _imgObj.addEventListener('click', function(e) {
        alert(e);
        alert(JSON.stringify(e.source));
        _win.remove(image);
    });
}

for (var i in colors) {

    var image = Titanium.UI.createImageView({
        backgroundColor : colors[i],
        top : 50,
        left : 30,
        width : 200,
        height : 200
    });
    imageHandler(image,$.win);
    $.win.add(image);
}

这样做是删除处理程序分隔处理程序并为您提供更多控制。通过for循环中的每次迭代,每个图像都定义了它自己的处理程序,这应该可行。