列表视图 itemclick 事件 appcelerator

Posted

技术标签:

【中文标题】列表视图 itemclick 事件 appcelerator【英文标题】:List view itemclick event appcelerator 【发布时间】:2017-07-05 17:14:38 【问题描述】:

我在代码中定义了一个 JSON,其中包含图像、标题、日期和 URL。这将用于填充列表视图。在任何列表项的单击事件中,我需要导航到不同的控制器并在其中呈现视图,其中包含根据单击的列表项的 url 播放视频的视频播放器,并且我也想显示日期和标题。 我不明白如何在 itemClick 事件中对此进行编码。请帮忙!

这是我的 DashboardController .js 文件。

Alloy.createController('VideoPlayerController',videoInfo[i]).getView();
var sections = [];
//JSON to populate the listview
var videoInfo = [
    pic : "/Images/playButton.png",
    info : "This in the the title for the first video.",
    date : "03/07/2017",
    url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
, 
    pic : "/Images/playButton.png",
    info : "This in the the title for the second video.",
    date : "03/07/2017",
    url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
, 
    pic : "/Images/playButton.png",
    info : "This in the the title for the third video.",
    date : "03/07/2017",
    url : "https://youtu.be/zkOSR0ZRb9khttps://youtu.be/zkOSR0ZRb9k"
];

function populateListView() 
    Ti.API.trace("[DashboardController.js  >>  populateListView() >>]");
    if (!_.isEmpty(videoInfo)) 
        for (var i = 0; i < videoInfo.length; i++) 
            var item = 
                template : "videoTemplate",
                iconId : 
                    image : videoInfo[i].pic
                ,
                titleId : 
                    text : videoInfo[i].info
                ,
                dateId : 
                    text : videoInfo[i].date
                ,
                urlId : 
                    text : videoInfo[i].url
                ,
                properties : 
                    backgroundColor : "transparent"
                
            ;
            sections.push(item);
        
       $.listSection.setItems(sections);
    
  
populateListView();
$.lView.addEventListener('click',function(e)
    var dataItem = $.listSection.getItemAt(e.itemIndex);    
);

DashboardController 的 .xml 文件是这样的:

<Alloy>
    <View id="win2" class="container">
        <View id = "v1" class ="view1"  layout ="horizontal" >
            <Button class="btnBack" ></Button>
            <Label  class = "label1">LIST VIEW EXAMPLE</Label>
        </View>
        <View class="view2">
            <TextField id = "txtSearch"></TextField>
        </View>
        <ListView id = "lView" class = "list1" >
             <Templates>
                    <ItemTemplate name="videoTemplate">
                        <View class = "viewTemplate" layout = "horizontal" >
                            <ImageView bindId="iconId"  id="pic"  />
                            <View class = "viewTitle" layout = "vertical" >
                                <Label bindId="titleId" id="info" />
                                <View class="viewDtUrl" layout="horizontal" >
                                    <Label bindId="dateId" id="date" />
                                    <Label bindId="urlId" id ="url" /> 
                                </View>
                            </View>
                        </View>
                    </ItemTemplate> 
            </Templates>
            <ListSection id = "listSection">
            </ListSection>
        </ListView>   
    </View>
</Alloy> 

这是将渲染视频播放器 (VideoPlayerController) 的控制器的 .xml 文件是这样的:

<Alloy>
    <View class="container">
        <VideoPlayer class = "video"></VideoPlayer>
        <View class="videoView">
            <Label class="titleInfo"></Label>
            <View class = "infoLabel">
                <Label class="dateInfo"></Label>
                <Label class="urlInfo"></Label>
            </View>>
        </View>
    </View>
</Alloy>

【问题讨论】:

【参考方案1】:

你很亲密。这里有几个项目:

    将 DashboarController.js 中的第一行 Alloy.createController('VideoPlayerController',videoInfo[i]).getView(); 向下移动到 lView 事件侦听器中。 我们要监听的 listview 事件称为 itemclick,而不是 click,所以更改它。 videoInfo 数组用作我们的数据收集。 itemclick 回调将返回被点击的行的索引,这将匹配我们的videoInfo 数组的顺序,所以我们可以将它传递给createController 为:videoInfo[e.itemIndex] 最后,createController 返回一个带有.getView() 的视图,在我们的例子中,这可能是一个TiUIWindow 对象,所以我们需要用.open() 打开那个窗口。

这给了我们:

$.lView.addEventListener('itemclick', function (e) 
    Alloy.createController('VideoPlayerController', videoInfo[e.itemIndex]).getView().open();
);

现在在我们的VideoPlayerController.js 中,我们将有类似的内容:

var args = $.args;
console.log('video url:' + args.url);

从那里,您可以使用传递给 args 的数据来设置窗口的其余部分。

【讨论】:

感谢亚当! :) 你刚刚拯救了我的一天! :) 是的,这绝对没问题。干杯!

以上是关于列表视图 itemclick 事件 appcelerator的主要内容,如果未能解决你的问题,请参考以下文章

itemclicked 中的错误是啥?

在 ItemClick() 事件上获取 ListView 项目的详细信息

Listview Itemclick事件未触发android xamarin

Annotations Recycler View ItemClick

如何使用在列表项单击时动态生成的文本视图标签突出显示我在列表视图中的当前位置

自定义vue点击事件传递数据