首页 > 解决方案 > 获取列表视图中的当前元素

问题描述

我正在开发一个简单的信使。我想实现消息可见/不可见的功能。我怎样才能获得标记元素的位置,这些元素在列表视图内的包装布局内?

在此处输入图像描述

这是我用来呈现消息的代码。

<ListView (loaded)="testLoad($event)"
   #chatBox
   separatorColor="transparent"
   class="chat-box"
   [items]="messages"
  (loaded)="scrollChatToBottom()"
  row="0">
  <ng-template let-item="item">
  <StackLayout 
    class="bubble-container">
    <Label
        [text]="item.createdAt | timeAgo"
        class="message-date-{{bubbleClass(item)}} SourceSansPro- 
   LightItalic"></Label>
    <WrapLayout 
      [class]="bubbleClass(item)" orientation="horizontal">
      <!--<Image 
      [src]="item.sender.pictureUrl"
      [class]="bubbleClass(item) + '-picture'">e></Imag-->
      <TextView
        editable="false"
        class="message-content SourceSansPro-Regular"
        [text]="item.messageBody"></TextView> 

    </WrapLayout >

    </StackLayout>
   </ng-template>
 </ListView>

标签: chatnativescriptnativescript-angular

解决方案


ListView 的整个想法是根据需要重用视图(模板),只有数据可能不同,但相同的 View 实例将在滚动时用于不同的索引。

所以一般来说你应该通过你的数据来控制你的视图。如果您打算将已读消息显示为粗体/浅色或不同颜色,则可以通过 CSS 完成,因此只需根据数据项中的已读/未读标志绑定正确的类。

如果您仍想访问实际的 View 元素,则可以使用RadListView。我认为目前没有一种简单的方法可以访问 ListView 中的 View 实例。


推荐阅读