微信小程序 弹幕

  
    
      
        
            {{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
        })
      }
    }
  }
}