更新记录

1.0.1（2026-09-22） 下载此版本

添加了效果预览图

1.0.0（2026-09-22） 下载此版本

首次上传 测试依赖性

平台兼容性

uni-app(4.85)

uni-app x(5.24)

# n-chat 高性能聊天气泡组件（UniApp X）

## 简介
**n-chat** 是一款专为 **UniApp X (UVue)** 打造的高性能聊天组件，基于高性能虚拟列表 **z-paging-x** 开发。
支持海量消息列表渲染不卡顿、左右气泡自动区分、**外层统一全局配色**，子组件无需逐条传参，极简开发体验。
适合聊天IM、私信、评论对话等场景。

## 插件依赖
本插件依赖：**z-paging-x**（UniApp X 专用虚拟列表）
安装本插件将自动安装依赖，无需用户手动引入。

## 组件特性
- ✅ 基于虚拟列表，**上万条消息无卡顿、高性能**
- ✅ 外层统一配色，所有子消息自动继承颜色
- ✅ 支持我方/对方消息左右布局自动区分
- ✅ 自定义头像、昵称、头像大小
- ✅ 全部属性可选，支持默认主题配色
- ✅ 全端兼容 UniApp X

## 快速使用示例
```html
<template>
    <n-chat
        background="#f4f5f7"
        color="#414141"
        Rbackground="#97ec69"
        Rcolor="#414141"
    >
        <n-message
            v-for="(item,index) in list"
            :key="index"
            :text="item.text"
            :avatar="item.avatar"
            :nickName="item.nickName"
            :avatarSize="100"
            :reverse="item.isSelf"
        />
    </n-chat>
</template>

属性文档

1、n-chat 父组件全局配色属性

统一控制所有消息气泡样式，全部可选，不传使用默认配色

2、n-message 消息子组件属性

核心优势

1. 无需逐条传颜色 外层 n-chat 统一配置，内部成千上百条 n-message 自动继承配色，大幅简化代码。
2. 海量消息不卡顿 依托 z-paging-x 虚拟列表，只渲染可视区域 DOM，上万条消息顺滑滚动。
3. 动态主题支持 支持动态修改外层颜色，全局气泡实时刷新。
4. 结构极简 插槽式开发，循环渲染超级简洁。

更新日志

v1.0.0

• 首次发布 n-chat 聊天气泡组件
• 集成 z-paging-x 高性能虚拟列表
• 支持全局统一配色（对方/我方气泡、文字色）
• n-message 支持头像、昵称、自定义头像尺寸、左右消息布局

changelog.md
```markdown
# 更新日志
## 1.0.0
- 首次发布 n-chat 聊天组件
- 集成 z-paging-x 虚拟列表，支持大量消息渲染
- n-chat 支持全局配置气泡颜色
- n-message 支持头像、昵称、自定义头像大小，reverse区分左右消息