Question

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

<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]);
    }

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

2 个答案: