The company’s Spring Festival activities used bullet screen round broadcast, did not find a suitable, I wrote a handwritten.

Js:

Step 1: Process the data obtained by the server

// handleData(data){console.log(data) this.data.classnum = 0 // {id: '1', the text: 'hair' thumbsUp: '1000', width: '}, this.data.localWishData = JSON.parse(JSON.stringify(data.data)) this.data.barrage = data.data this.pushBarrageData() let  everyNum = parseInt(this.data.barrage.length/5) // console.log(this.data.barrage) this.data.barrage = JSON.parse(JSON.stringify(this.data.barrage)) for(let i=0; i<this.data.arrayName.length; I++) {let name = this. Data. ArrayName [I] + 'Array' / / the data into several portions if (I = = this. Data. ArrayName. Length - 1) {this. Data [name] = this.data.barrage.slice(everyNum*i,this.data.barrage.length) }else{ this.data[name] = ArrayName [I], arrayName[name]); // arrayName (arrayName[I], arrayName[name]); // arrayName (arrayName[I], arrayName[name]); ArrayName [I]+'Array'] = JSON. Parse (JSON. Stringify (this.data[name].slice(0,5))) ArrayName [I]+'GetNum'] = this.data['real'+this.data. ArrayName [I]+'Array'].length / / store all the rendering of the interface data. This data. AllDataArray. Push (enclosing data [' real '+ this. Data. ArrayName [I] +' Array ']) / / console.log(this.data[name]) }Copy the code

Step 2: Since my requirement is processing 25 pieces of data, make sure I have 25

pushBarrageData(){ if(this.data.barrage.length<25){ if(this.data.barrage.length>=25-this.data.localWishData.length){ let  change = this.data.localWishData.slice(0,(25-this.data.localWishData.length)) this.data.barrage = [...this.data.barrage,...change] }else{ this.data.barrage = [...this.data.barrage,...this.data.localWishData.slice(0,this.data.localWishData.length)] this.pushBarrageData() } } },Copy the code

Step 3: Dynamically calculate the width of each barrage

handleClass(text,array){ // console.log(array) array.forEach((item,index)=>{ let strings = 0 let nums = 0; // item.comment.forEach((items)=>{ // }) for(let i = 0; i<item.comment.length; i++){ let items = item.comment[i] if(isNumber(items)){ nums++ }else{ strings++ } } item.id= text+'-'+index item.width=strings*30+46*2+11*String(item.lokeCount).length+25+7+nums*15 if(index>0){ item.left = (parseInt(array[index-1].width)+parseInt(array[index-1].left))+55 }else{ let reduce = Math.round(Math.random()*100) item.left = 750-reduce } // this.data.classNUm++ }) } ,Copy the code

Step 4: Bullets may contain numbers, letters and characters, so the width of bullets is different

function isNumber(val) { var regPos = /^\d+(\.\d+)? $/; Nonnegative floating-point var regNeg = / / / ^ (- (([0-9] + \. [0-9] * [1-9] [0-9] *) | ([0-9] * [1-9] [0-9] * \ [0-9] +) | ([0-9] * [1-9] [0-9] *))) $/; / / negative float if (regPos. Test (val) | | regNeg. Test (val)) {return true; } else { return false; }}Copy the code

Add: You can also determine the number of bytes by the following

String.prototype.gblen = function() { var len = 0; var str = '' for (var i=0; i<this.length; i++) { if (this.charCodeAt(i)>127 || this.charCodeAt(i)==94) { len += 2; } else if(isNumber(this[I])){len +=1.5; } else{ len +=1; } str+=this[i] if(parseInt(len/2)>=28) { return str+'... ' } } return str }Copy the code

Step 4: Start moving the barrage box

animaMove(){
  this.data.lastBarrage = this.data.nextBarrage
  this.data.nextBarrage = this.data.lastBarrage-1000
  this.animate('.barrage-box',[
    {left:this.data.lastBarrage+'rpx'},
    {left:this.data.nextBarrage+'rpx'},
  ],6000,function(){
    // this.clearAnimation('.barrage-box',()=>{
      this.animaMove()
    // })
    
  }.bind(this))
},
Copy the code

Step 5: Check every 500 milliseconds. If the second one disappears, add two more and delete the latest two

handleAnimaTime(){ let _self = this this.data.moveInter = setInterval(()=>{ wx.createSelectorQuery().select('.barrage-box').boundingClientRect(function(rect){ for(let i = 0; i<5; i++){ if(_self.data['real'+_self.data.arrayName[i]+'Array'][1].width+_self.data['real'+_self.data.arrayName[i]+'Array'][1].lef t<=-(rect.left*750 / wx.getSystemInfoSync().windowWidth)){ Love. Data [' real '+ love. Data. ArrayName [I] +' Array ']. Splice (0, 2) love. HandlePush (love) data) arrayName [I]) _self.handlePush(_self.data.arrayName[i]) _self.setData({ allDataArray:_self.data.allDataArray }) } } }).exec() },500) },Copy the code

Here is the WXML code

<view class='barrage-box' style="left:{{barrageLeft}}rpx; top:{{barrageTop}}rpx" > <view class='every-list' wx:for="{{allDataArray}}" wx:for-item='allData' > <view wx:for="{{allData}}" class='list-text' style="width:{{item.width}}rpx; left:{{item.left}}rpx"> <view bindtap="clickText" data-get-item='{{item}}'>{{item.comment}}</view> <view class='give-num-click' bindtap="clickGiveLike" data-get-index='{{index}}' data-get-item='{{item}}'></view> <view class='give-like-click'> <view class='give-like-box'> <image class='give-like give-like-{{item.id}}' src='{{item.src}} '></image> </view> <view class='thumbs-Up'>{{item.likeCount}}</view> </view> </view> </view> </view>Copy the code