Press Plus

# MessageList 消息列表

可用于IM消息列表的展示。

# 引入

import PressMessageList from '@tencent/press-plus/press-message-list/press-message-list';

export default {
  components: {
    PressMessageList,
  }
}

# 基本用法

<PressMessageList
  :list="list"
  @onClickDetail="onClickDetail"
/>

export default {
  data() {
    return {
      list: [{
        id: '1',
        nick: '这是昵称,
        content: '这里是消息内容',
        unreadCount: 99,
        time: '08-20 11:32',
        avatar: 'https://mike-1255355338.cos.ap-guangzhou.myqcloud.com/press/img/wechat_avatar.png',
      }],
    }
  },
  methods: {
    onClickDetail(item) {
      console.log('点击了: ', item);
    },
    onDelete(item) {
      console.log('正在删除: ', item);
    },
  }
}

# API

# Props

参数 说明 类型 默认值
list 消息列表 array<{nick, content, time, avatar}> []

# Event

事件名 说明 回调参数
onClickDetail 点击消息条目 消息item
onDelete 点击删除 消息item

# 常见问题

# 唯一id

list中每一项的id应该唯一，否则会出现删除某一条消息后，swipe-cell仍未关闭。

横屏

← GpIndexHor →