uniapp 使用组件 uni-list 实现聊天列表功能-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp 使用组件 uni-list 实现聊天列表功能。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

如何使用 uniapp 的组件实现聊天列表的功能呢，翻阅了半天文档，终于找到一个实用的方法，下面是具体的步骤

1、首先需要下载对应的插件

去uniapp的官方文档进行下载（uni-ui - DCloud 插件市场），这里直接下载插件并导入到HBuilderx 中就可以了。

uniapp 使用组件 uni-list 实现聊天列表功能

2、接下来就可以直接进行使用了

最终效果图

uniapp 使用组件 uni-list 实现聊天列表功能

对应的代码图

uniapp 使用组件 uni-list 实现聊天列表功能

对应的代码

 <!-- 底部消息列表 -->
     <view>
       <uni-list :border="false">
         <uni-list-chat
         			:avatar-circle="true"
         			title="张三"
         			avatar="/static/common/unname1.jpeg"
         			note="你可以期待太阳从东方升起，而风却随心所欲地从四面八方吹来。"
         			time="06.11 16:08"
         			:clickable="false"
                    clickable
                    v-for="(itme,index) of 10"
                    :key="index"
          />
       </uni-list>
     </view>