文章详情

微信小程序 扩展组件·小程序弹幕组件

Barrage for MiniProgram

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

使用方法

  1. npm 安装
npm install --save miniprogram-barrage
  1. JSON 组件声明
{
  "usingComponents": {
    "barrage": "miniprogram-barrage",
  }
}

  1. wxml 引入弹幕组件
<video class="video" src="{{src}}">
  <barrage class="barrage"></barrage>
</video>
  1. js 获取实例
 Page({
  onReady() {
    this.addBarrage()
  },
  addBarrage() {
    const barrageComp = this.selectComponent('.barrage')
    this.barrage = barrageComp.getBarrageInstance({
      font: 'bold 16px sans-serif',
      duration: 10,
      lineHeight: 2,
      mode: 'separate',
      padding: [10, 0, 10, 0],
      tunnelShow: false
    })
    this.barrage.open()
    this.barrage.addData(data)
  }
 })

配置

Barrage 默认配置

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

弹幕数据配置

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

接口

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

说明

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

微信扫一扫

支付宝扫一扫

版权: 转载请注明出处:https://pvqq.com/165.html

上一篇:

已经没有上一篇了!

相关推荐
微信定制开发解决方案
熟悉了解微信服务号、订阅号、企业号、小程序各大公众平台接口权限、政策变化为您提供专业、贴心、可落地的微信个性化需求定制服务。 不同于市面上通…
697
微信小程序内测广告组件与新增快速创建能力等
微信小程序现在一般每周都会推送一次更新通知,上次主要是推送了微信小程序支持插件等相关信息,就在昨天晚上又推送了新的更新通知(微信团队真敬业,…
352
微信小程序将逐步取消通过wx.getUserInfo方式获取用
近日,微信公众平台发布通知称微信小程序与小游戏将逐步取消通过wx.getUserInfo方式获取用户信息,提醒开发者逐步使用其他方式代替wx…
1,086
微信订阅号消息列表改版:变成信息流了
就在今天晚上早些时候,微构网络了解到,腾讯通过多个公众号(微信公众平台和微信派等)推送消息:“ 为提升阅读效率,我们对订阅号消息列表改版,用…
660
微信小程序工具细节点
javascript && wxss 微信小程序运行在三端:iOS、Android 和 用于调试的开发者工具。 三端的脚本执…
873
微信小程序API 第三方平台
wx.getExtConfig(OBJECT) 基础库 1.1.0 开始支持,低版本需做兼容处理 获取第三方平台自定义的数据字段。 OBJE…
516
发表评论
暂无评论

还没有评论呢,快来抢沙发~

点击联系客服

在线时间:8:00-18:00

客服电话

0755-32914944

客服邮箱

Mail@pvqq.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站