更新记录

1.0.0（2026-03-25） 下载此版本

初次更新

平台兼容性

uni-app(4.28)

其他

弹幕组件 (danmu)

基于 Vue 开发的通用弹幕滚动组件，支持多轨道、随机内容、自动测宽、防重叠碰撞检测等功能。适用于直播互动、评论滚动等场景。

功能特性

• 🚀 多轨道并发：支持自定义轨道数量，弹幕在不同轨道独立运行。
• 🛡️ 智能防重叠：内置碰撞检测算法，确保同轨道内弹幕不会重叠。
• 📏 自动测宽：通过隐藏容器精准计算弹幕文本宽度，适配不同内容长度。
• 🎨 样式自定义：支持自定义字体大小、颜色、轨道间距、生成频率等。
• ⚡ 性能优化：动画结束后自动移除节点，避免内存泄漏。

安装与使用

将 danmu.vue 文件放入项目的组件目录（如 components/danmu），然后在页面中引入使用。

组件属性 (Props)

数据格式说明

barrageData 数组中的每个对象建议包含以下字段：

{
  text: '弹幕显示的文字内容', // String, 必填
  avatar: '/static/images/user.png' // String, 选填，头像图片路径
}

注意事项

1. 容器宽度：组件会自动获取父容器宽度，请确保组件挂载时父容器已有明确宽度。
2. 层级问题：组件默认 z-index: 9999 且 pointer-events: none，确保弹幕浮于上层且不阻挡点击事件。
3. 性能建议：
   • generateInterval 不宜设置过小，否则会导致 DOM 节点过多影响性能。
   • trackCount 根据容器高度合理设置，避免轨道过密导致文字看不清。
4. 生命周期：组件在 onUnload 时会自动清除定时器，无需手动销毁。

样式覆盖

如果需要修改弹幕气泡的背景色、圆角等样式，可以通过外部 CSS 覆盖 .barrage-item 类：

/* 在页面 style 或全局 style 中 */
.barrage-item {
    background-color: rgba(0, 0, 0, 0.6) !important;
    border-radius: 10px !important;
}

基础用法

<danmu
    :barrageData="barrageList"
    color="#fff"
    :fontSize="24"
    :generateInterval="3000"
    :height="150"
    :horizontalGap="200"
    :speed="30"
    :trackCount="5"
/>

data
barrageList: [
    {text: '弹幕内容', avatar: '头像链接'}
]

添加新弹幕
barrageList.push({text: '弹幕内容', avatar: '头像链接'})