详解微信小程序开发弹幕的实现（无后台）

                  
        弹幕
                                      发射        
     {{item.barrage_shootText}}  wxss代码如下：/* pages/index/index.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: greenyellow;    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;}这样基本的样式就都实现了。接下来要对弹幕上的字进行处理。文字是从右往左移动，文字出现的位置top是随机，left则是取屏幕的宽度。移动的时候是用定时器进行处理。还有就是字体的颜色是随机出现的。这些功能都是利用js处理的。js的代码如下：var barrage_style_arr = [];var barrage_style_obj ={};var phoneWidth = 0;var timers = [];var timer ;Page({  data: {    imgUrls: [      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'    ],    indicatorDots: true,    autoplay: true,    interval: 3000,    duration: 500,    barrageTextColor:"#D3D3D3",    barrage_inputText:"none",    barrage_shoottextColor:"black",    bind_shootValue:"",    barrage_style:[],    barragefly_display:"none",  },    // 生命周期函数--监听页面加载  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)    }  },  //发射按钮  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,        //发送弹幕      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
    })
  },

})