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

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

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

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

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

最终效果图

 

 对应的代码图

 对应的代码

 <!-- 底部消息列表 -->
     <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>

基本用法

  • 设置 title 属性,可以显示列表标题
  • 设置 disabled 属性,可以禁用当前项
  • 设置 note 属性 ,可以在第二行显示描述文本信息
  • 设置 show-badge 属性 ,可以显示角标内容
  • 设置 show-switch 属性,可以显示 switch 开关
  • 设置 thumb 属性 ,可以在列表左侧显示略缩图
  • 设置 show-extra-icon 属性,并指定 extra-icon 可以在左侧显示图标
  • 设置 clickable 为 true ,则表示这是一个可点击的列表,会默认给一个点击效果,并可以监听 click 事件
  • 设置 link 属性,会自动开启点击反馈,并给列表右侧添加一个箭头
  • 设置 to 属性,可以跳转页面,link 的值表示跳转方式,如果不指定,默认为 navigateTo

这里我只列举基本的用法,详细的用法可以去官网进行查看(uni-list 列表 - DCloud 插件市场

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

M_emory_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值