uni-app Vue3 弹幕功能

在uni-app中使用Vue 3实现弹幕功能，可以通过以下步骤实现。这里我们将利用Vue 3的组合式API（Composition API）和uni-app提供的页面及组件能力来构建一个基本的弹幕系统。

首先，确保你已经安装了uni-app和Vue 3。如果还没有，可以通过以下命令安装uni-app的HBuilderX开发工具，并创建一个新的Vue 3项目。

# 安装HBuilderX（具体步骤请参考官方文档）

接下来，在你的项目中，创建一个新的组件，例如Barrage.vue，用于展示弹幕。

<template>
  <view class="barrage-container">
    <view
      v-for="(item, index) in barrageList"
      :key="index"
      class="barrage-item"
      :style="item.style"
    >
      {{ item.text }}
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const barrageList = ref([]);
const containerHeight = ref(0);
const interval = ref(null);

const addBarrage = (text) => {
  const top = Math.random() * containerHeight.value;
  const left = containerWidth.value + 10; // 初始位置在容器外
  const speed = 2 + Math.random() * 3; // 随机速度
  const item = {
    text,
    style: {
      top: `${top}px`,
      left: `${left}px`,
      transition: `transform ${containerWidth.value / speed}s linear`,
      transform: `translateX(-${containerWidth.value}px)`,
    },
  };
  barrageList.value.push(item);

  // 自动移除弹幕
  setTimeout(() => {
    const index = barrageList.value.findIndex((i) => i === item);
    if (index !== -1) {
      barrageList.value.splice(index, 1);
    }
  }, containerWidth.value / speed * 1000);
};

onMounted(() => {
  containerHeight.value = document.querySelector('.barrage-container').offsetHeight;
  const containerWidth = document.querySelector('.barrage-container').offsetWidth;
  // 监听窗口大小变化
  window.addEventListener('resize', () => {
    containerHeight.value = document.querySelector('.barrage-container').offsetHeight;
    const containerWidthUpdated = document.querySelector('.barrage-container').offsetWidth;
    // 需要重新计算已经存在的弹幕的位置和速度
    barrageList.value.forEach((item) => {
      item.style.left = `${containerWidthUpdated + 10}px`;
      item.style.transition = `transform ${containerWidthUpdated / (2 + Math.random() * 3)}s linear`;
      item.style.transform = `translateX(-${containerWidthUpdated}px)`;
    });
  });
});

// 示例：添加弹幕
addBarrage('Hello, Uni-app!');
addBarrage('This is a barrage message.');
</script>

<style scoped>
.barrage-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 200px; /* 根据需要调整高度 */
  background-color: rgba(0, 0, 0, 0.5);
}
.barrage-item {
  position: absolute;
  white-space: nowrap;
  color: white;
  font-size: 18px;
}
</style>

在App.vue或其他页面中引入并使用这个组件：

<template>
  <view>
    <Barrage />
    <!-- 其他内容 -->
  </view>
</template>

<script setup>
import Barrage from './components/Barrage.vue';
</script>

以上代码展示了一个基本的弹幕实现，你可以根据需要调整样式、添加更多的功能（如用户输入弹幕、弹幕颜色随机化等）。