vue 中 弹幕的播放

前言

  最近在搞弹幕的问题，小程序上的和vue上的，不想使用插件，于是自己摸索了一下，其实包括 2中弹幕形式 有序和无序的

直接上代码吧

<!-- 弹幕 -->
      <template v-if=" barrageData.newsRocket.length > 0 ">
        <!-- 'animation-duration':6+'s','animation-delay': item.delay+'s' -->
        <div class="rocket barrage-wrapper" v-show=" barrageData.isBarrage ">
          <div
            class="barrage-context barrageTop"
            :style="{top:0.8+'rem', 'animation-duration': barrageData.barrageTop.length > 1 ? barrageData.barrageTop.length * 4 +'s':'4s',
             width:barrageData.barrageTop.length > 1?'':'120%'}"
          >
            <div class="display-list" v-for="(item,index) in barrageData.barrageTop" :key="'br'+index">
              <div>
                <img class="reImg" :src="item.avatar">
              </div>
              <div class="barrage-text" v-html="item.desc"></div>
            </div>
          </div>
        </div>
        <div class="rocket barrage-wrapper" v-show="barrageData.isBarrage">
          <div
            class="barrage-context barrageBottom"
            :style="{top:1.8+'rem', 'animation-duration': barrageData.barrageBottom.length > 1? barrageData.barrageTop.length*5+'s':'4s',
            width:barrageData.barrageBottom.length > 1?'':'120%'}"
          >
            <div class="display-list" v-for="(item,index) in barrageData.barrageBottom" :key="'br'+index">
              <div>
                <img class="reImg" :src="item.avatar">
              </div>
              <div class="barrage-text" v-html="item.desc"></div>
            </div>
          </div>
        </div>
      </template>

      <template v-else>
        <div class="no-barrage" v-show=" activityData.register ">{{ barrageData.friendsDesc }}</div>
      </template>

css 

 // 弹幕
  .barrage-wrapper {
    position: fixed;
    height: 0.7rem;
    width: 7.5rem;
    white-space: nowrap;
    text-overflow: clip;
    .barrage-context {
      display: flex;
      justify-content: space-around;
      // width: 100%;
      height: 0.7rem;
      left: 100%;
      visibility: hidden;
      // overflow: hidden;
      position: absolute;
    }
    .display-list {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 0.7rem;
      // position: absolute;
      // left: 0%;
      // visibility: hidden;
      color: #fff;
      margin-right: 1.1rem;
    }
    img {
      width: 0.7rem;
      height: 0.7rem;
      border-radius: 50%;
      background: #141540;
      border: 0.04rem solid rgba(255, 255, 255, 0.7);
      position: relative;
    }
    .barrage-text {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      background: rgba(0, 0, 0, 0.6);
      white-space: nowrap;
      margin: 0 -0.5rem;
      height: 0.64rem;
      line-height: 0.64rem;
      padding: 0 0.7rem;
      font-size: 0.24rem;
      border-top-right-radius: 0.45rem;
      border-bottom-right-radius: 0.45rem;
    }
  }

View Code

 动画化的css

js 来判断他是 一条代码还是多条  代码来判断他的宽度是 

再根据 css 来根据

@keyframes barrage {
  from {
    //left: 100%;
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    //left: 0%;
    visibility: hidden;
    transform: translateX(-180%);
  }
}

@keyframes barrageBottom {
  from {
    visibility: visible;
    transform: translateX(0);
  }
  100% {
    visibility: hidden;
    transform: translateX(-180%);
  }
}

View Code

visibility: hidden; 这个字段来判读弹幕在滚动到另一端的地方，消失，不至于弹幕卡主住那边

用 left 的话就是判断她是无序的代码， 下一条会比上一条快

用  transform: translateX(0); 就是有序代码 ，不会跑到前面

 

 

这样弹幕就完成了