微信小程序弹幕从右到左移动的气泡

 

html：
 

  <view class="doommview">
    <view class="dan" wx:if="{{false==flag}}" bind:tap="dan_down">弹X</view>
    <view class="dan" wx:if="{{false!=flag}}" bind:tap="dan_up">弹✔</view>
    <block wx:for="{{doommData}}" wx:key="id">
      <view wx:if="{{item.display}}" class="aon" style="animation: first {{item.time}}s linear forwards;top:{{item.top}}%;color:{{item.color}};">
        <view style="display: flex;">
          <image src="{{item.img}}" style="width: 60rpx;height: 60rpx;border-radius: 50%;" mode="" />
          <view style="width: 5rpx;"></view>
          <view style="height: 60rpx;line-height: 60rpx;"> {{item.text}}成功参与了拼团 </view>
        </view>
      </view>

    </block>
  </view>

写在page（{ }）外面：

var doommList = [];
var i = 0;
var ids = 0;
var cycle = null //计时器
var timer_daojishi
// 下面两个是控制抽奖顺序的速度的
var king = null
var wirel = null

// 弹幕参数
class Doomm {
  constructor(text, top, time, color, img) { //内容，顶部距离，运行时间，颜色（参数可自定义增加）
    this.text = text;
    this.top = top;
    this.time = time;
    this.color = color;
    this.img = img;
    this.display = true;
    this.id = i++;
  }
}
// 弹幕字体颜色
function getRandomColor() {
  let rgb = []
  for (let i = 0; i < 3; ++i) {
    let color = Math.floor(Math.random() * 256).toString(16)
    color = color.length == 1 ? '0' + color : color
    rgb.push(color)
  }
  return '#' + 'FFFFFF'
}

css:
 

.button {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.aon {
  position: absolute;
  white-space: nowrap;
  /* 防止向下换行*/
  animation-timing-function: linear;
  animation-fill-mode: none;
  background-color: rgba(0, 0, 0, 0.40);
  padding: 10rpx;
  border-radius: 50rpx;
  font-size: 35rpx;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

.doommview {
  z-index: 3;
  /* //设置弹幕高度 */
  height: 15%;
  width: 100%;
  position: fixed;
}

@keyframes first {
  from {
    left: 100%;
  }

  to {
    left: -100%;
  }
}

.dan {
  position: fixed;
  top: 15vh;
  left: 2.7%;
  background-color: rgba(0, 0, 0, 0.8);
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  text-align: center;
  line-height: 80rpx;
  color: #FFFFFF;
  font-weight: 300;
}

js:

 dan_up() {
    var that = this
    console.log('开启弹幕');
    that.danmu()

    that.setData({
      flag: false,
    })
  },
  dan_down() {
    var that = this
    that.setData({
      doommData: []
    })
    clearInterval(cycle)
    that.setData({
      flag: true,
    })
    console.log('关闭弹幕');
  },
  danmu() {
    that = this;
    cycle = setInterval(function () {
      let arr = that.data.arr
      if (arr[ids] == undefined) {
        ids = 0
        // 1.循环一次，清除计时器
        // doommList = []
        // clearInterval(cycle)

        // 2.无限循环弹幕  
        // 控制弹幕高度的参数： Math.ceil(Math.random() * 80) ， 10是控制 移速的
        doommList.push(new Doomm(arr[ids].text, Math.ceil(Math.random() * 80), 10, getRandomColor(), arr[ids].img));
        if (doommList.length > 2) { //删除运行过后的dom
          doommList.splice(0, 1)
        }
        console.log("ddd", doommList);
        that.setData({
          doommData: doommList
        })
        ids++
      } else {
        // 10是控制 移速的
        doommList.push(new Doomm(arr[ids].text, Math.ceil(Math.random() * 80), 10, getRandomColor(), arr[ids].img));
        if (doommList.length > 2) {
          doommList.splice(0, 1)
        }
        that.setData({
          doommData: doommList
        })
        ids++
      }
    }, 2000)

  },

  onHide() {
    clearInterval(cycle)
    clearInterval(timer_daojishi)
    clearInterval(king);
    clearInterval(wirel);
    ids = 0;
    doommList = []
  },
  onUnload() {
    clearInterval(cycle)
    clearInterval(timer_daojishi)
    clearInterval(king);
    clearInterval(wirel);
    ids = 0;
    doommList = []
  },