更新记录

1.0.0（2025-05-13） 下载此版本

• 首次发布
• 基本功能实现：
  • 支持滚动弹幕、顶部固定弹幕和底部固定弹幕
  • 支持多轨道管理和碰撞检测
  • 支持自定义弹幕样式和内容
  • 提供完整的控制 API
  • 支持插件系统扩展

平台兼容性

uni-app

其他

gp-danmu 弹幕组件

介绍

gp-danmu 是一个功能强大、高度可定制的弹幕组件，适用于 uni-app 多端开发。支持 H5、App 和小程序平台，提供丰富的自定义配置选项和多种弹幕展示模式。

特性

• 🚀 多端适配：完美支持 H5、App 和微信小程序等多个平台
• 🎨 高度可定制：提供丰富的样式和行为配置选项
• 🔌 插件化设计：支持自定义弹幕类型和动画效果
• 🛠 完整 API：包含完善的控制方法和事件回调
• 📱 性能优化：采用虚拟列表和帧动画优化，保证高性能

安装方式

uni_modules安装

1. 在uni-app插件市场页面点击右上角【使用HBuilderX导入插件】，或者【下载插件ZIP】
2. 在HBuilderX中的项目管理器选择项目，右键选择导入插件，选择下载的zip包

基本用法

在 template 中使用

<template>
  <view class="container">
    <gp-danmu
      ref="danmuRef"
      :danmu-list="danmuList"
      :config="danmuConfig"
      @click="handleDanmuClick"
    />
  </view>
</template>

在 script 中配置

<script lang="ts" setup>
import { ref, reactive } from 'vue';

// 弹幕数据
const danmuList = ref([
  { id: 1, text: '这是一条普通弹幕', color: '#FFFFFF' },
  { id: 2, text: '这是一条彩色弹幕', color: '#FF6600' },
  { id: 3, text: '这是一条顶部弹幕', type: 'top', color: '#00FFFF' },
  { id: 4, text: '这是一条底部弹幕', type: 'bottom', color: '#FFFF00' },
]);

// 弹幕配置
const danmuConfig = reactive({
  trackHeight: 40,         // 轨道高度
  trackNumber: 5,          // 轨道数量
  speed: 100,              // 弹幕速度
  fontSize: 16,            // 默认字体大小
  fontColor: '#FFFFFF',    // 默认字体颜色
  backgroundColor: 'transparent', // 弹幕背景色
  trackMode: 'overlap',    // 轨道模式：overlap(重叠)、separate(分离)
  looping: false,          // 是否循环播放
  direction: 'rtl',        // 弹幕方向：rtl(从右到左)、ltr(从左到右)
  duration: 8000,          // 弹幕动画持续时间（毫秒）
  density: 0.5,            // 弹幕密度(0-1)
  randomTrack: true,       // 是否随机选择轨道
  opacity: 1               // 弹幕透明度
});

// 弹幕组件引用
const danmuRef = ref(null);

// 点击弹幕事件回调
const handleDanmuClick = (danmu) => {
  console.log('点击了弹幕:', danmu);
};
</script>

高级用法

自定义弹幕渲染

您可以通过 slot 自定义弹幕的渲染内容和样式：

<gp-danmu :danmu-list="danmuList" :config="danmuConfig">
  <template #danmu="{ danmu }">
    <view class="custom-danmu">
      <image v-if="danmu.avatar" :src="danmu.avatar" class="avatar" />
      <text class="username">{{danmu.username}}</text>
      <text class="content">{{danmu.text}}</text>
    </view>
  </template>
</gp-danmu>

使用内置控制 API

// 组件引用
const danmuRef = ref(null);

// 添加单条弹幕
const addDanmu = () => {
  danmuRef.value.add({
    id: Date.now(),
    text: '这是新增的弹幕',
    color: '#ffff00'
  });
};

// 批量添加弹幕
const addBatchDanmu = () => {
  danmuRef.value.addBatch([
    { id: 101, text: '批量弹幕1' },
    { id: 102, text: '批量弹幕2' }
  ]);
};

// 暂停弹幕
const pauseDanmu = () => {
  danmuRef.value.pause();
};

// 恢复弹幕
const playDanmu = () => {
  danmuRef.value.play();
};

// 清空弹幕
const clearDanmu = () => {
  danmuRef.value.clear();
};

// 动态设置配置
const updateConfig = () => {
  danmuRef.value.setConfig({
    speed: 150,
    fontSize: 20
  });
};

使用不同的弹幕类型

// 标准滚动弹幕
const scrollDanmu = {
  id: 1,
  text: '这是标准滚动弹幕',
  color: '#FFFFFF',
  type: 'scroll'
};

// 顶部固定弹幕
const topDanmu = {
  id: 2,
  text: '这是顶部固定弹幕',
  color: '#00FFFF',
  type: 'top'
};

// 底部固定弹幕
const bottomDanmu = {
  id: 3,
  text: '这是底部固定弹幕',
  color: '#FFFF00',
  type: 'bottom'
};

// 彩虹弹幕
const rainbowDanmu = {
  id: 4,
  text: '这是彩虹弹幕',
  color: '#FF00FF',
  type: 'rainbow'
};

// 闪烁弹幕
const blinkDanmu = {
  id: 5,
  text: '这是闪烁弹幕',
  color: '#FFFFFF',
  type: 'blink'
};

// 缩放弹幕
const scaleDanmu = {
  id: 6,
  text: '这是缩放弹幕',
  color: '#00FF00',
  type: 'scale'
};

更改弹幕方向

// 从右到左滚动
const rtlConfig = reactive({
  trackMode: 'overlap',
  direction: 'rtl',
  speed: 100
});

// 从左到右滚动
const ltrConfig = reactive({
  trackMode: 'overlap',
  direction: 'ltr',
  speed: 100
});

API 参考

Props

弹幕数据结构

每条弹幕对象（danmuItem）支持以下属性：

配置选项

事件

方法

以下方法可通过组件实例调用（需要使用 ref）：

自定义弹幕插件系统

gp-danmu 提供了一个插件系统，允许您创建自定义的弹幕类型和动画效果。

创建自定义弹幕类型插件

// 导入必要的插件
import { ref, onMounted } from 'vue';
import { rainbowDanmuPlugin, blinkDanmuPlugin, scaleDanmuPlugin } from '../uni_modules/gp-danmu/components/gp-danmu/plugins/rainbow-danmu.js';

// 弹幕组件引用
const danmuRef = ref(null);

// 定义一个自定义弹幕插件
const customDanmuPlugin = {
  // 插件名称
  name: 'custom-danmu',

  // 插件初始化
  install(danmu) {
    // 注册新的弹幕类型
    danmu.registerDanmuType('custom', {
      // 创建动画
      createAnimation(danmuItem, trackInfo) {
        return {
          duration: 3000,
          timingFunction: 'linear',
          // 定义动画关键帧
          keyframes: [
            { opacity: 1, transform: 'scale(1) translateX(100%)', offset: 0 },
            { opacity: 0.5, transform: 'scale(1.5) translateX(50%)', offset: 0.5 },
            { opacity: 1, transform: 'scale(1) translateX(-100%)', offset: 1 }
          ]
        };
      }
    });
  }
};

// 在组件挂载后安装插件
onMounted(() => {
  if (danmuRef.value) {
    // 安装内置插件
    danmuRef.value.use(rainbowDanmuPlugin);
    danmuRef.value.use(blinkDanmuPlugin);
    danmuRef.value.use(scaleDanmuPlugin);

    // 安装自定义插件
    danmuRef.value.use(customDanmuPlugin);
  }
});

兼容性

• 支持 uni-app 多端开发
• 已在 Android/iOS App、H5、微信小程序等环境中测试通过
• 支持 Vue2 和 Vue3 项目