gui-im-message 消息展示组件用于展示及时通讯消息,支持文本、图片、语音三种格式,带有图片预览,语音播放等功能;
gui-im-message : /graceUI/组件目录/gui-im-message
H5 | APP | 小程序 | NVUE |
✔ | ✔ | ✔ | 不支持,请使用vue实现 |
属性名称 | 类型 | 默认值 | 作用 |
msgs | Array | [] | 消息数据,格式见下面的说明 |
userid | String | 用户唯一性识别id, 当用户id与消息数据中的uindex相等时 消息右侧展示 | |
group | String | 消息分组,过滤本组消息 | |
background | String | #F7FBFE | 组件背景颜色 |
unameStyle | String | line-height:28rpx; height:28rpx; font-size:26rpx; color:#666666; | 用户昵称样式 |
txtContentStyle | String | line-height:38rpx; font-size:30rpx; color:#2B2E3D; | 文本消息样式 |
var msgs = [ { group : '分组id', uindex : '用户id', uname : '昵称', contentType : '消息类型', // txt -文本, img - 图片, voice - 语音 uface : '用户头像图片地址', content : '消息数据', date : '消息发送时间' }, // 如 { group : 'group1', uindex : '10000', uname : '老兵张嘎', contentType : 'txt', uface : 'https://img-cdn-tc.dcloud.net.cn/uploads/article/20201111/21cbed4d79a442b841513c99f8a53e85.png', content : '鼓掌 ...', date : '2021.01.11 19:20' }, ...... } // 更多数据格式请参考 /GraceUI5/demoData/immessages.js