chat - 获取列表视图中的当前元素
问题描述
我正在开发一个简单的信使。我想实现消息可见/不可见的功能。我怎样才能获得标记元素的位置,这些元素在列表视图内的包装布局内?
这是我用来呈现消息的代码。
<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>
解决方案
ListView 的整个想法是根据需要重用视图(模板),只有数据可能不同,但相同的 View 实例将在滚动时用于不同的索引。
所以一般来说你应该通过你的数据来控制你的视图。如果您打算将已读消息显示为粗体/浅色或不同颜色,则可以通过 CSS 完成,因此只需根据数据项中的已读/未读标志绑定正确的类。
如果您仍想访问实际的 View 元素,则可以使用RadListView。我认为目前没有一种简单的方法可以访问 ListView 中的 View 实例。
推荐阅读
- c# - 如何修改此 BFS 算法?
- php - 防止 wordpress 标题中的换行和样式文本
- php - 不会从 elementor 表单中提取表单输入
- javascript - 使用 djs v13 播放本地音乐文件
- image - 在flatList中通过模态打开动态图像反应本机
- vue.js - Sass @use 不会在 Vue 组件中导入
- java - 是否可以将 QueryCursor 存储在 Firestore 上?
- python - 使用 subprocess.call() 调用 C 程序时的奇怪行为
- javascript - 如何在反应三纤维 MapControls 中限制平移距离
- docker - 使用 docker push 到私有注册表(Heroku Registry)时出现 401 错误