マイクロ信ウィジェット弾幕

  
    
      
        
            {{item.text}}
        
      
    
    
      
        
            {{item.text}}
        
      
    


     
  

cssスタイルセクション

/**index.wxss**/
.button{
  position: absolute;
  bottom: 0;
  width: 100%;
}
.aon{
position: absolute;
white-space:nowrap;/*  */
}
.doommview{
  z-index: 3;
  height: 80%;
  width: 100%;
  position: absolute;
}
/** **/
@keyframes first{
  from{left: 100%; }
  to{left: -100%;}
}

js部分

//index.js
// var page = undefined;
let index = 0;
let i = 0;
let topMsgList = [];
let bottomMsgList = [];
Page({
  data: {
    msgData: [
      { msg: "XXX XIAXIA , 1 " },
      { msg: "XXX XIAXIA , 2 " },
      { msg: "XXX XIAXIA , 3 " },
      { msg: "XXX XIAXIA , 4 " },
      { msg: "XXX XIAXIA , 5 " },
      { msg: "XXX XIAXIA , 6 " },
      { msg: "XXX XIAXIA , 7 " },
      { msg: "XXX XIAXIA , 8 " },
      { msg: "XXX XIAXIA , 9 " }
    ],
    topMsg: "",
    bottomMsg: "",
    isChangeBarrage: false

  },
  onLoad: function () {
    const that = this;
    const { msgData } = that.data;
    const newData = that.change(msgData);

    that.setBarrage("topMsg");
    let showTopMsg = setInterval(function () { that.setBarrage("topMsg"); }, newData[0].time / 2 * 1000);

    setTimeout(function () {
      that.setBarrage("bottomMsg");
      let showBottomMsg = setInterval(function () { that.setBarrage("bottomMsg"); }, newData[0].time / 2 * 1000)
    }, newData[0].time / 6 * 1000)

  },


  bindbt: function () {
    console.log(1)
    const that = this;
    const { msgData } = that.data;
    const longth = msgData.length + 1;
    const obj = { msg: `XXX XIAXIA , ${longth} `, time: msgData[0].time };
    msgData.splice(i % msgData.length, 0, obj)
    that.setData({
      msgData,
      isChangeBarrage: true
    })
  },

// 
  change: function (data) {
    return data.map((item, index) => {
      item.time = 8;
      return item
    })
  },


  setBarrage: function (msgListName) {
    const that = this;
    const { isChangeBarrage, msgData } = that.data;

    let _newData = that.change(msgData);

// 
    if (isChangeBarrage) {
      that.setData({
        isChangeBarrage: !isChangeBarrage
      })
    }
    index = index >= _newData.length ? index - _newData.length : index;

    if (msgListName == "topMsg") {
      topMsgList.push(new Doomm(_newData[index].msg, _newData[index].time, msgListName, that));
      that.setData({
        topMsg: topMsgList
      });
    } else {
      bottomMsgList.push(new Doomm(_newData[index].msg, _newData[index].time, msgListName, that));
      that.setData({
        bottomMsg: bottomMsgList
      })
    }
    index++;
  }
})


class Doomm {
  constructor(text, time, msgListName, page) {
    this.text = text;
    this.time = time;
    let that = this;
    this.id = i++;
    setTimeout(function () { delList(msgListName, that, page) }, time * 1000)// 。

    function delList(msgListName, that) {
      if (msgListName == "topMsg") {
        topMsgList.splice(topMsgList.indexOf(that), 1);// ， 
        page.setData({
          topMsg: topMsgList
        })
      } else {
        bottomMsgList.splice(bottomMsgList.indexOf(that), 1);// ， 
        page.setData({
          bottomMsg: bottomMsgList
        })
      }
    }
  }
}