如上图所示，板砖在地图上方实现了弹幕效果。通过下方代码基本上你可以直接复制粘贴实现该功能。但是请注意：

1. util 是我个人封装的方法库，这里的minrequest你可以用wx.request代替

2. util.randomarround方法是获得min-max的随机数，需要你自己配置

前端代码

{{item.barrage_shootText}}

后端代码

const app = getApp();
var util = require('../../utils/util.js');

/**
 * 弹幕设置
 */
var barrage_list_arr = []; // 记录预设的条
var barrage_list_moving = []; // 记录正在参加弹幕滚动的条
var phoneWidth = 0;
var timers = [];
var timer;

/**
 * 组装一条弹幕
 */
const iniBarrage = (img, text) => {
  return {
    barrage_shootText: text,
    barrageText_height: (Math.random()) * 266,
    barrage_shoottextColor: "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")",
    barrage_phoneWidth: util.randomaround(0, phoneWidth),
    display: "display:block"
  };
}

/**
 * 加载弹幕
 */
const loadPops = (that) => {
  let pops = that.data.pops;
  let list = [];

  for (let i in pops) {
    let one = pops[i];
    list.push(iniBarrage(one['openid'], one['detail']));
    barrage_list_arr = list;
    that.timer = setInterval(that.barrageMove, 500);
  }

  that.setData({
    barrage_list: list,
    barragefly_display: 'block'
  });
}


Page({
  data: {
    barrageTextColor: "#D3D3D3",
    barrage_inputText: "none",
    barrage_shoottextColor: "black",
    barragefly_display: "none",
    bind_shootValue: "",
    barrage_phoneWidth: 0,
    barrage_list: [],
    pops: [],
  },


  /**
   * 初始化
   */
  onLoad: function(options) {
    var that = this;

    //获取屏幕的宽度
    wx.getSystemInfo({
      success: function(res) {
        phoneWidth = res.windowWidth - 100;
        that.setData({
          barrage_phoneWidth: res.windowWidth - 100,
        })

          loadPops(that);
      }
    })
  },

  /**
   * 加载弹幕信息
   */
  onShow: function() {
    let that = this;

    let data = {
      "ctl": 'apps',
      "act": "pops",
      'hash': app.globalData.hash
    };
    util.minRequest(data, function(res) {
      that.setData({
        pops: res.data
      });
    });
  },

  /**
   * 打开/关闭弹幕
   */
  barrageSwitch: function(e) {
    if (!e.detail.value) {
      //清空弹幕
      barrage_list_arr = [];
      //设置data的值
      this.setData({
        barrageTextColor: "#D3D3D3",
        barrage_inputText: "none",
        barragefly_display: "none",
        barrage_list: barrage_list_arr,
      });

      //清除定时器
      clearInterval(timer);
    } else {
      this.setData({
        barrageTextColor: "#04BE02",
        barrage_inputText: "flex",
        barragefly_display: "block",
      });
      //打开定时器
      timer = setInterval(this.barrageText_move, 100);
    }
  },


  /**
   * 弹幕轮播
   */
  barrageMove: function() {

    if (barrage_list_moving.length == 0) {
      //todo:弹幕跑完了，重置
      for (var i in barrage_list_arr) {
        let temp = barrage_list_arr[i];
        temp.barrage_phoneWidth = util.randomaround(0, phoneWidth);
        barrage_list_moving.push(temp);
      }
    }

    //todo:跑弹幕
    for (var i in barrage_list_moving) {

      let now = barrage_list_moving[i];

      var textMove = barrage_list_moving[i].barrage_phoneWidth - 2; // 左移5

      barrage_list_moving[i].barrage_phoneWidth = textMove;

      // todo：优化跑完了不移除这条，把他归0就是了
      if (textMove <= -100 && barrage_list_moving.length > 0) {
        barrage_list_moving.splice(0, 1);
        now.barrage_phoneWidth = phoneWidth + 80; //隐藏到屏幕里等待发送
        barrage_list_moving.push(now);
      }
    }
    this.setData({
      barrage_list: barrage_list_moving
    });
  }

})

如果你对此不是很明白，欢迎加QQ：554305954和我深入浅出的交流一番。

如果您觉得本篇文章对您有帮助，欢迎您关注右方二维码“订阅”即可获得长期内容免费订阅！