在使用滚动视图创建的水平列表视图中单击项目

Question

我通过滚动视图创建了一个水平列表视图，但我不知道如何向它添加项目点击事件并跟踪哪个项目被点击

<ScrollView id="scrollView"  showHorizontalScrollIndicator="true" height="20%" width="80%">
    <View id="containerView" backgroundColor="#336699" height="300" width="1000" layout='horizontal' />
</ScrollView>


var columns = [];
for(var index=0;index<15;index++){
    columns[index] = Ti.UI.createView({
        width   : 200,
        height  : 200,
        backgroundColor : '#123456',
        left    : 20 
    });
    $.containerView.add(columns[index]);
}


function doClick(item){
    console.log(item);
};

Answer 1

您必须给每个 columns[index] 观看次数一个 clickListener。这应该在您的 for 循环中执行。

columns[index] = Ti.UI.createView({
    width   : 200,
    height  : 200,
    backgroundColor : '#123456',
    left    : 20 
});

columns[index].addEventListener('click', function(e) {
    // code here is run when the event is fired
    // properties of the event object 'e' describe the event and object that received it
    Ti.API.info('The '+e.type+' event happened');
});

$.containerView.add(columns[index]);

不需要额外的函数 doClick(Item)，因为您可以内联定义它。

Answer 2

您可以向父视图添加监听器，而不是向每个视图添加点击监听器。并通过自定义 ID 访问另一个子视图。例如，在您的情况下，请使用以下代码。

    <ScrollView id="scrollView"  showHorizontalScrollIndicator="true" height="20%" width="80%">
                <View id="containerView" onClick="onContainerViewClicked" backgroundColor="#336699" height="300" width="1000" layout='horizontal' />
    </ScrollView>

    var columns = [];
    for(var index=0;index<15;index++){
       columns[index] = Ti.UI.createView({
           width   : 200,
           height  : 200,
           backgroundColor : '#123456',
           left    : 20,
           id :index 
       });
       $.containerView.add(columns[index]);
    }
    $.containerView.width = 220 * 15;

    function onContainerViewClicked(e){
       alert(e.source.id);
       alert(columns[e.source.id]);
    }

在使用滚动视图创建的水平列表视图中单击项目

Get item clicked in horizontal list view created with scroll view

listview

titanium

horizontalscrollview

titanium-alloy