uni-app nvue 付费实现弹幕插件

在实现uni-app中nvue的弹幕插件时，我们可以利用nvue的原生渲染能力，结合JavaScript逻辑来控制弹幕的显示和移动。以下是一个简单的弹幕插件实现代码示例。

首先，确保你的uni-app项目已经配置好nvue支持。

1. 创建nvue页面

在pages目录下创建一个新的nvue页面，比如danmaku.nvue。

<template>
  <div>
    <scroll-view scroll-y="false" class="container">
      <div class="danmaku-container">
        <text v-for="(item, index) in danmakus" :key="index" :style="danmakuStyle(item)" class="danmaku">{{item.text}}</text>
      </div>
    </scroll-view>
    <button @click="sendDanmaku">发送弹幕</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      danmakus: [],
      timer: null,
    };
  },
  mounted() {
    this.startDanmaku();
  },
  methods: {
    startDanmaku() {
      this.timer = setInterval(() => {
        this.danmakus.push({ text: '测试弹幕', time: new Date().getTime() });
        if (this.danmakus.length > 20) { // 限制弹幕数量，避免过多影响性能
          this.danmakus.shift();
        }
      }, 1000);
    },
    danmakuStyle(item) {
      const elapsed = new Date().getTime() - item.time;
      const speed = 5000; // 弹幕移动速度（毫秒）
      const position = `${window.innerWidth - (elapsed / speed) * window.innerWidth}px`;
      return `position: absolute; top: ${Math.random() * window.innerHeight}px; left: ${position};`;
    },
    sendDanmaku() {
      const text = prompt('请输入弹幕内容：');
      if (text) {
        this.danmakus.push({ text, time: new Date().getTime() });
        if (this.danmakus.length > 20) {
          this.danmakus.shift();
        }
      }
    },
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style>
.container {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.danmaku-container {
  position: relative;
  width: 100%;
  height: 100%;
}
.danmaku {
  white-space: nowrap;
  color: white;
  font-size: 20px;
}
</style>

2. 解释代码

• 模板部分：包含一个滚动视图（不启用垂直滚动），用于容纳弹幕容器。弹幕容器中的文本元素通过v-for循环渲染。
• 脚本部分：
  • data：定义弹幕数组和定时器。
  • mounted：页面挂载时启动弹幕动画。
  • startDanmaku：模拟发送弹幕，每秒添加一条。
  • danmakuStyle：根据弹幕发送时间计算其位置，实现移动效果。
  • sendDanmaku：手动发送弹幕，通过prompt获取用户输入。
  • beforeDestroy：页面销毁时清除定时器。
• 样式部分：定义容器和弹幕的基本样式。

这个示例展示了基本的弹幕功能，你可以根据需求进一步扩展和优化，比如添加更多自定义样式、控制弹幕方向、增加动画效果等。