用uniapp 写一个有序弹幕组件兼容h5和小程序

首先，在uni-app中创建一个新的组件，命名为“ordered-barrage”。
在组件的template中，使用v-for指令遍历弹幕数组，并使用CSS样式设置弹幕的位置和样式。

<template>
  <div class="ordered-barrage">
    <div v-for="(item, index) in barrageList" :key="index" class="barrage-item" :style="{ top: (index*40)+'rpx' }">{{ item }}</div>
  </div>
</template>

<style>
.ordered-barrage {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.barrage-item {
  position: absolute;
  left: 100%;
  white-space: nowrap;
  font-size: 30rpx;
  color: #fff;
}
</style>

在组件的script中，声明一个barrageList数组用于存储弹幕内容。并使用setInterval函数定时添加弹幕内容到数组中。

<script>
export default {
  data() {
    return {
      barrageList: []
    }
  },
  mounted() {
    this.addBarrage()
  },
  methods: {
    addBarrage() {
      setInterval(() => {
        let text = this.getRandomText()
        this.barrageList.push(text)
        if (this.barrageList.length > 10) {
          this.barrageList.shift()
        }
      }, 2000)
    },
    getRandomText() {
      let texts = ['你好', '好的', '谢谢', '再见', '我爱你', '你真棒', '加油', '好看', '厉害了']
      let index = Math.floor(Math.random() * texts.length)
      return texts[index]
    }
  }
}
</script>

最后，在组件的小程序端和H5端分别导出组件，以实现兼容性。

// 小程序端
export default {
  usingComponents: {
    'ordered-barrage': './components/ordered-barrage/ordered-barrage'
  }
}

// H5端
export default {
  components: {
    'ordered-barrage': () => import('@/components/ordered-barrage/ordered-barrage.vue')
  }
}
``