日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

Barrage for MiniProgram

小程序彈幕組件。通過 view 的 transform 移動(dòng)彈幕，覆蓋在 原生組件上時(shí)，請(qǐng)確保組件已經(jīng)同層化。參考用例

使用方法

1. npm 安裝

npm install --save miniprogram-barrage

1. JSON 組件聲明

{
  "usingComponents": {
    "barrage": "miniprogram-barrage",
  }
}

1. wxml 引入彈幕組件

1. js 獲取實(shí)例

 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 默認(rèn)配置

{
  duration: 10, // 彈幕動(dòng)畫時(shí)長 (移動(dòng) 2000px 所需時(shí)長)
  lineHeight: 1.2, // 彈幕行高
  padding: [0, 0, 0, 0], // 彈幕區(qū)四周留白
  alpha: 1, // 全局透明度
  font: '10px sans-serif', // 全局字體
  mode: 'separate', // 彈幕重疊 overlap  不重疊 separate
  range: [0, 1], // 彈幕顯示的垂直范圍，支持兩個(gè)值。[0,1]表示彈幕整個(gè)隨機(jī)分布，
  tunnelShow: false, // 顯示軌道線
  tunnelMaxNum: 30, // 隧道最大緩沖長度
  maxLength: 30, // 彈幕最大字節(jié)長度，漢字算雙字節(jié)
  safeGap: 4, // 發(fā)送時(shí)的安全間隔
  enableTap: false, // 點(diǎn)擊彈幕停止動(dòng)畫高亮顯示
}

彈幕數(shù)據(jù)配置

{
  color: '#000000', // 默認(rèn)黑色
  content: '', // 彈幕內(nèi)容
  image: {
    head: {src, width, height}, // 彈幕頭部添加圖片
    tail: {src, width, height}, // 彈幕尾部添加圖片
    gap: 4 // 圖片與文本間隔
  }
  
}

接口

barrage.open() // 開啟彈幕功能
barrage.close() // 關(guān)閉彈幕功能，清空彈幕
barrage.addData() // 添加彈幕數(shù)據(jù)
barrage.setRange() // 設(shè)置垂直方向顯示范圍
barrage.setFont() // 設(shè)置全局字體
barrage.setAlpha() // 設(shè)置全局透明度
barrage.showTunnel() // 顯示彈幕軌道
barrage.hideTunnel() // 隱藏彈幕軌道

說明

1. 通過 canvas 實(shí)現(xiàn)彈幕組件時(shí)，對(duì)于低版本基礎(chǔ)庫由于缺失 raf 接口，動(dòng)畫效果不夠流暢。
2. 2.9.0 起小程序新的 canvas 接口可替代 view 的實(shí)現(xiàn)。

文章名稱：創(chuàng)新互聯(lián)小程序教程：微信小程序 擴(kuò)展組件·小程序彈幕組件
當(dāng)前鏈接：http://www.5511xx.com/article/cocsihi.html