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

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

安装

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

在uni-app项目中使用

方式1: easycom自动导入

在 pages.json 中配置easycom:

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

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

方式2: 手动导入

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

<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'] | 弹幕颜色随机池 |

弹幕数据格式

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

事件

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

示例

基础用法

<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>

自定义配置

<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