Barrage for MiniProgram

小程序弹幕组件。通过 view 的 transform 移动弹幕,覆盖在 原生组件上时,请确保组件已经同层化。参考用例

使用方法

  1. npm 安装,参考 小程序 npm 支持
  1. npm install --save miniprogram-barrage
  1. JSON 组件声明
  1. {
  2. "usingComponents": {
  3. "barrage": "miniprogram-barrage",
  4. }
  5. }
  1. wxml 引入弹幕组件
  1. <video class="video" src="{{src}}">
  2. <barrage class="barrage"></barrage>
  3. </video>
  1. js 获取实例
  1. Page({
  2. onReady() {
  3. this.addBarrage()
  4. },
  5. addBarrage() {
  6. const barrageComp = this.selectComponent('.barrage')
  7. this.barrage = barrageComp.getBarrageInstance({
  8. font: 'bold 16px sans-serif',
  9. duration: 10,
  10. lineHeight: 2,
  11. mode: 'separate',
  12. padding: [10, 0, 10, 0],
  13. tunnelShow: false
  14. })
  15. this.barrage.open()
  16. this.barrage.addData(data)
  17. }
  18. })

配置

Barrage 默认配置

  1. {
  2. duration: 10, // 弹幕动画时长 (移动 2000px 所需时长)
  3. lineHeight: 1.2, // 弹幕行高
  4. padding: [0, 0, 0, 0], // 弹幕区四周留白
  5. alpha: 1, // 全局透明度
  6. font: '10px sans-serif', // 全局字体
  7. mode: 'separate', // 弹幕重叠 overlap 不重叠 separate
  8. range: [0, 1], // 弹幕显示的垂直范围,支持两个值。[0,1]表示弹幕整个随机分布,
  9. tunnelShow: false, // 显示轨道线
  10. tunnelMaxNum: 30, // 隧道最大缓冲长度
  11. maxLength: 30, // 弹幕最大字节长度,汉字算双字节
  12. safeGap: 4, // 发送时的安全间隔
  13. enableTap: false, // 点击弹幕停止动画高亮显示
  14. }

弹幕数据配置

  1. {
  2. color: '#000000', // 默认黑色
  3. content: '', // 弹幕内容
  4. image: {
  5. head: {src, width, height}, // 弹幕头部添加图片
  6. tail: {src, width, height}, // 弹幕尾部添加图片
  7. gap: 4 // 图片与文本间隔
  8. }
  9. }

接口

  1. barrage.open() // 开启弹幕功能
  2. barrage.close() // 关闭弹幕功能,清空弹幕
  3. barrage.addData() // 添加弹幕数据
  4. barrage.setRange() // 设置垂直方向显示范围
  5. barrage.setFont() // 设置全局字体
  6. barrage.setAlpha() // 设置全局透明度
  7. barrage.showTunnel() // 显示弹幕轨道
  8. barrage.hideTunnel() // 隐藏弹幕轨道

说明

  1. 通过 canvas 实现弹幕组件时,对于低版本基础库由于缺失 raf 接口,动画效果不够流畅。
  2. 2.9.0 起小程序新的 canvas 接口可替代 view 的实现,参考片段