uni-bullet-screen/README.md

弹幕组件 for uni-app and 微信小程序

# 弹幕组件 for uni-app/微信小程序

一个基于Vue 3的弹幕组件，专为uni-app和微信小程序设计，支持自定义颜色、速度和多行显示。

## 安装

```bash
npm install uni-bullet-screen
# 或
yarn add uni-bullet-screen
```

## 在uni-app项目中使用

### 方式1: easycom自动导入

在 `pages.json` 中配置easycom:

```json
{
  "easycom": {
    "autoscan": true,
    "custom": {
      "bullet-screen": "uni-bullet-screen/dist/bullet-screen.es.js"
    }
  }
}
```

这样就可以在任何页面直接使用组件，无需手动导入。

### 方式2: 手动导入

在页面或组件中导入使用:

```vue
<template>
  <view>
    <bullet-screen :bullets="bulletData" @click="handleBulletClick" />
  </view>
</template>

<script>
import BulletScreen from 'uni-bullet-screen';

export default {
  components: {
    BulletScreen
  },
  data() {
    return {
      bulletData: [
        {
          moment_id: '1',
          content: '这是一条弹幕',
          avatar: '/static/avatar.png'
        },
        {
          moment_id: '2',
          content: '自定义颜色弹幕',
          avatar: '/static/avatar2.png',
          color: '#FF5733'
        }
      ]
    }
  },
  methods: {
    handleBulletClick(bullet) {
      console.log('点击了弹幕:', bullet);
    }
  }
}
</script>
```

## API 文档

### Props

| 属性名   | 类型       | 默认值 | 说明                          |
|---------|------------|-------|------------------------------|
| bullets | Array      | []    | 弹幕数据数组                   |
| rows    | Number     | 2     | 弹幕显示的行数                 |
| speed   | Number     | 30    | 弹幕滚动的基础速度             |
| colors  | Array      | ['#3C4654', '#BA5140', '#8F6D5F', '#0E6E86', '#A9A082'] | 弹幕颜色随机池 |

### 弹幕数据格式

```typescript
interface Bullet {
  moment_id: string;   // 弹幕唯一ID
  content: string;     // 弹幕内容
  avatar: string;      // 头像URL
  color?: string;      // 可选，弹幕背景颜色
}
```

### 事件

| 事件名   | 返回值     | 说明                          |
|---------|------------|------------------------------|
| click   | Bullet     | 点击弹幕时触发，返回弹幕对象   |

## 示例

### 基础用法

```vue
<template>
  <view>
    <bullet-screen :bullets="bulletData" />
  </view>
</template>

<script>
export default {
  data() {
    return {
      bulletData: [
        { moment_id: '1', content: '这是一条弹幕', avatar: '/static/avatar.png' },
        { moment_id: '2', content: '这是第二条弹幕', avatar: '/static/avatar2.png' }
      ]
    }
  }
}
</script>
```

### 自定义配置

```vue
<template>
  <view>
    <bullet-screen 
      :bullets="bulletData" 
      :rows="3" 
      :speed="25"
      :colors="customColors"
      @click="handleBulletClick"
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      bulletData: [...],
      customColors: ['#FF5733', '#33FF57', '#3357FF', '#F033FF', '#FF3333']
    }
  },
  methods: {
    handleBulletClick(bullet) {
      uni.showToast({
        title: `点击了: ${bullet.content}`,
        icon: 'none'
      });
    }
  }
}
</script>
```

## 小程序注意事项

1. 图片域名白名单：如果使用远程图片作为avatar，请确保已在小程序管理后台添加对应域名到白名单中。

2. 性能考虑：弹幕数量过多可能影响性能，建议控制在合理范围内（如每次展示100条以内）。

## 许可证

MIT