更新记录

1.0.0（2025-11-10） 下载此版本

• 初始版本发布
• 垂直向上滚动动画
• 循环播放弹幕列表
• 自定义滚动速度（barrageScrollSpeed）
• 自定义弹幕样式（barrageItemStyle）
• 自动文本截断（超长文本自动省略）
• 顶部渐变遮罩效果
• 响应式设计（使用 rpx 单位）
• 自动清理定时器，防止内存泄漏

平台兼容性

uni-app(3.6.14)

BarrageScroll 评论滚动组件

一个用于 uni-app 的垂直滚动评论组件，支持循环播放、自定义样式和滚动速度。

安装

方式1：通过 uni_modules 安装（推荐）

在 HBuilderX 中，进入插件市场，搜索 "BarrageScroll"，点击安装即可。

方式2：手动安装

将 uni_modules/hb-barrage-scroll 目录复制到你的项目的 uni_modules 目录下。

快速开始

1. 引入组件

在 easycom 模式下（uni-app 默认开启），无需手动引入，直接使用即可：

<template>
  <view class="container">
    <hb-barrage-scroll 
      :barrageList="dataList" 
      :barrageScrollSpeed="2" 
      :barrageItemHeight="50" 
      :showAreaCount="5" 
      :barrageItemStyle="barrageItemStyle" 
    />
  </view>
</template>

<script>
export default {
  data() {
    return {
      dataList: [
        { id: 0, content: '效果好极了！' },
        { id: 1, content: '发货快 质量不错' },
        { id: 2, content: '发货快' }
      ],
      barrageItemStyle: {
        fontSize: '24rpx',
        background: 'rgba(255,192,203, 0.2)',
        color: 'rgb(255,192,203)',
        border: '2rpx solid #FFC0CB'
      }
    }
  }
}
</script>

API 文档

Props

barrageList 数据格式

[
  {
    id: 0,              // 必填：唯一标识（string 或 number）
    content: '文本内容'  // 必填：显示的文本内容（string）
  }
]

barrageItemStyle 样式对象

支持所有 CSS 样式属性，使用 rpx 单位。例如：

{
  fontSize: '24rpx',
  background: 'rgba(255,192,203, 0.2)',
  color: 'rgb(255,192,203)',
  border: '2rpx solid #FFC0CB',
  borderRadius: '20rpx'
}

使用示例

基础用法

<template>
  <hb-barrage-scroll :barrageList="barrageList" />
</template>

<script>
export default {
  data() {
    return {
      barrageList: [
        { id: 1, content: '第一条评论' },
        { id: 2, content: '第二条评论' },
        { id: 3, content: '第三条评论' }
      ]
    }
  }
}
</script>

自定义滚动速度

<hb-barrage-scroll 
  :barrageList="barrageList" 
  :barrageScrollSpeed="2" 
/>

• barrageScrollSpeed = 1：慢速滚动
• barrageScrollSpeed = 1.5：中速滚动（默认）
• barrageScrollSpeed = 2：快速滚动
• barrageScrollSpeed = 3：极快滚动

自定义评论样式

<template>
  <hb-barrage-scroll 
    :barrageList="barrageList"
    :barrageItemStyle="customStyle"
  />
</template>

<script>
export default {
  data() {
    return {
      barrageList: [...],
      customStyle: {
        fontSize: '28rpx',
        background: 'linear-gradient(90deg, rgba(255,0,0,0.3), rgba(0,0,255,0.3))',
        color: '#FFFFFF',
        border: '1rpx solid #FF0000',
        borderRadius: '30rpx',
        padding: '10rpx 20rpx'
      }
    }
  }
}
</script>

调整显示区域

<hb-barrage-scroll 
  :barrageList="barrageList"
  :showAreaCount="5"      <!-- 显示5条评论 -->
  :barrageItemHeight="60" <!-- 每条评论高度60rpx -->
/>

容器总高度 = showAreaCount × barrageItemHeight（单位：rpx）

技术说明

滚动机制

• 使用 setInterval 实现动画循环（约 30fps，间隔 33ms）
• 通过 transform: translateY() 实现垂直滚动
• 当滚动到列表末尾时，自动重置到初始位置，实现循环播放
• 文本自动截断，防止超长文本影响布局

响应式单位

组件使用 rpx 作为单位，会根据屏幕宽度自动适配：

• 750rpx = 屏幕宽度
• 在不同设备上自动缩放

注意事项

1. 数据格式：barrageList 中的每个项必须包含 id 和 content 属性
2. id 唯一性：id 必须唯一，用于 Vue 的 v-for 的 key
3. 样式单位：建议在 barrageItemStyle 中使用 rpx 单位以保持响应式
4. 文本长度：超长文本会自动截断为 16 个字符并添加 ...
5. 容器定位：组件使用 position: absolute，需要父容器有定位上下文

样式定制

组件提供了默认样式，你可以通过 barrageItemStyle prop 覆盖：

• 默认背景：rgba(35,183,204, 0.2)
• 默认文字颜色：rgb(35, 183, 204)
• 默认字体大小：24rpx
• 默认圆角：20rpx
• 默认最大宽度：480rpx

更新日志

请查看 changelog.md

许可证

MIT