uniapp 仿拼多多拼单成功的弹幕队列消息提示

UniApp 是一套基于 Vue.js 的框架，用于构建跨平台的应用。如果要在 UniApp 中仿制拼多多的拼单成功弹幕队列消息提示功能，首先你需要做的是：

1. **创建组件**：设计一个弹幕样式的通知组件，可以包含文字信息、动态动画等元素。这个组件可以是一个自定义的 Vue 组件。

<template>
  <div class="pop-up">
    <span class="message">{{ message }}</span>
    <transition-group name="fade" tag="div">
      <div v-for="(item, index) in messages" :key="index" :class="{ 'fadeIn': item.show }">
        <div class="danmu">{{ item.content }}</div>
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '拼团成功',
      messages: [
        { content: '恭喜您，拼团成功', show: false },
        // ...后续队列的消息
      ]
    };
  },
  methods: {
    addDanmu() {
      this.messages.push({ content: '用户' + Math.random().toString(36).substring(2, 7), show: false });
    }
  },
  mounted() {
    setTimeout(() => {
      this.addDanmu();
      // 模拟滚动效果
      this.$refs.popUp.scrollTop = this.$refs.popUp.scrollHeight;
    }, 500);
  }
};
</script>

<style scoped>
.pop-up {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
}
.fade-enter-active,
.fade-leave-active {
  transition: all 0.5s ease;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.message {
  margin-right: 10px;
}
.danmu {
  /* 样式自定义 */
  display: inline-block;
  /* 随机位置 */
  top: -20px;
  position: absolute;
  animation-name: danmu-fade;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
@keyframes danmu-fade {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(100%);
  }
}
</style>

2. **触发消息展示**：在合适的业务场景（如用户操作完成后）调用 `addDanmu` 方法，添加新的弹幕消息并显示出来。可以设置定时器模拟消息滚动。

3. **调整样式**：根据实际需求调整弹幕的样式，包括颜色、字体、动画效果等。