一哼鬓、效果圖

image.png

二、代碼
wxml:

<view>
    <video src="{{imgUrls}}"  class="slide-image"></video>
</view>
  

<!--彈幕開關-->
<view class="barrage-Switch" style="color:{{barrageTextColor}};">
   <switch id="switch_" bindchange="barrageSwitch"/>
   <text>彈幕</text>
</view>

<!--彈幕輸入框-->
 <view class="barrage-inputText" style="display:{{barrage_inputText}}">
     <view class="barrage-input">
       <input bindblur="bind_shoot" value="{{bind_shootValue}}"/>
     </view>
     <view class="barrage-shoot">
         <button class="shoot" size="mini" bindtap="shoot">發(fā)射</button>
     </view>
 </view>

<!--彈幕上單文字-->
<view class="barrage-fly" style="display:{{barragefly_display}}">
 <block wx:for="{{barrage_style}}" wx:key="unique">
  <text class="barrage-textFly" style="color:{{item.barrage_shoottextColor}};left:{{item.barrage_phoneWidth}}px;top:{{item.barrageText_height}}px;">{{item.barrage_shootText}}</text>
 </block>
</view>

js:

var barrage_style_arr = [];
var barrage_style_obj ={};
var phoneWidth = 0;
var timers = [];
var timer ;
Page({
 data: {
   imgUrls: 'http://kqbb1688.com/video/10fenzhong.mp4',
   indicatorDots: true,
   autoplay: true,
   interval: 3000,
   duration: 500,
   barrageTextColor:"#D3D3D3",
   barrage_inputText:"none",
   barrage_shoottextColor:"black",
   bind_shootValue:"",
   barrage_style:[],
   barragefly_display:"none",
 },

   // 生命周期函數(shù)--監(jiān)聽頁面加載

 onLoad:function(options){
   var that = this;
   //獲取屏幕的寬度
     wx.getSystemInfo({
       success: function(res) {
          that.setData({
               barrage_phoneWidth:res.windowWidth-100,
          })
       }
     })
     phoneWidth = that.data.barrage_phoneWidth;
     console.log(phoneWidth);
 },
 //是否打開彈幕...
 barrageSwitch: function(e){
   console.log(e);
   //先判斷沒有打開
   if(!e.detail.value){
   //清空彈幕
     barrage_style_arr = [];
     //設置data的值
     this.setData({
       barrageTextColor:"#D3D3D3",
       barrage_inputText:"none",
       barragefly_display:"none",
       barrage_style:barrage_style_arr,
     });
     //清除定時器
     clearInterval(timer);
   }else{
     this.setData({
       barrageTextColor:"#04BE02",
       barrage_inputText:"flex",
       barragefly_display:"block",
     });

     //打開定時器
       timer= setInterval(this.barrageText_move,800)
   }
 },

 

 //發(fā)射按鈕

 shoot: function(e){
   //字體顏色隨機
   var textColor = "rgb("+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+","+parseInt(Math.random()*256)+")";
   // //設置彈幕字體的水平位置樣式
   // var textWidth = -(this.data.bind_shootValue.length*0);
   //設置彈幕字體的垂直位置樣式
   var barrageText_height = (Math.random())*266;
    barrage_style_obj = {
     // textWidth:textWidth,
     barrageText_height:barrageText_height,
     barrage_shootText:this.data.bind_shootValue,
     barrage_shoottextColor : textColor,
     barrage_phoneWidth:phoneWidth
   };

   barrage_style_arr.push(barrage_style_obj);
   this.setData({
     barrage_style:barrage_style_arr,        //發(fā)送彈幕
     bind_shootValue:""                    //清空輸入框
   })
     //定時器  讓彈幕動起來
     //  this.timer= setInterval(this.barrageText_move,800);
 },

 

//定時器  讓彈幕動起來
 barrageText_move: function(){
   var timerNum = barrage_style_arr.length;
   var textMove ;
   for(var i=0;i<timerNum;i++){
      textMove = barrage_style_arr[i].barrage_phoneWidth;
      console.log("barrage_style_arr["+i+"].barrage_phoneWidth----------:"+barrage_style_arr[i].barrage_phoneWidth);
      textMove = textMove -20;
     barrage_style_arr[i].barrage_phoneWidth = textMove;
     //走完的移除掉
     if(textMove<=-100){
//         clearTimeout(this.timer);
         barrage_style_arr.splice(0,1);
         i--;
         //全部彈幕運行完
         if(barrage_style_arr.length==0){
           this.setData({
             barrage_style:barrage_style_arr,
           })
           // clearInterval(this.timer);
           return;
         }

     }
     console.log("第"+i+"個定時器:",textMove);
     this.setData({
       barrage_style:barrage_style_arr,
     })
   }
 },

 

 //綁定發(fā)射輸入框，將值傳遞給data里的bind_shootValue绿语，發(fā)射的時候調用

 bind_shoot:function(e){
   this.setData({
     bind_shootValue:e.detail.value
   })
 },
})

wxss:

.slide-image {
  width: 100%;
}
/* 彈幕選擇按鈕的操作*/

.barrage-Switch {
  position: absolute;
  bottom: 10px;
  right: 10px;
  z-index: 2;
}

/* 彈幕輸入框的操作*/
.barrage-inputText {
  position: absolute;
  display: flex;
  background-color: #BFBFBF;
  width: 100%;
  height: 40px;
  flex-direction: row;
  nav-index: 2;
  justify-content: center;
  align-items: center;
  bottom: 10%;
}

.barrage-input {
  background-color: white;
  width: 60%;
  height: 30px;
}

.barrage-shoot {
  margin-left: 10px;
  width: 25%;
  height: 30px;
}

.shoot {
  width: 100%;
  color: black;
}

/*彈幕飛飛飛*/
.barrage-fly {
  z-index: 3;
  height: 80%;
  width: 100%;
  position: absolute;
  top: 0;
}

.barrage-textFly {
  position: absolute;
}