走马灯vue 消息通知

以下是一个手动实现走马灯效果的Vue组件示例：

<template>
  <div class="carousel">
    <div class="carousel-container" :style="{ transform: `translateX(${offset}px)` }">
      <div v-for="(item, index) in items" :key="index" class="carousel-item">
        {{ item }}
      </div>
    </div>
    <button class="carousel-button prev" @click="prev">Prev</button>
    <button class="carousel-button next" @click="next">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [], // 后端接口返回的数据
      offset: 0, // 偏移量
      itemWidth: 200, // 每个项目的宽度
      visibleItems: 3, // 可见项目的数量
    };
  },
  mounted() {
    // 调用后端接口获取数据
    this.fetchData();
  },
  methods: {
    fetchData() {
      // 调用后端接口获取数据并更新items数组
      // 示例代码：
      // axios.get('/api/data').then(response => {
      //   this.items = response.data;
      // });
    },
    prev() {
      this.offset += this.itemWidth;
      if (this.offset > 0) {
        this.offset = -(this.items.length - this.visibleItems) * this.itemWidth;
      }
    },
    next() {
      this.offset -= this.itemWidth;
      if (this.offset < -(this.items.length - this.visibleItems) * this.itemWidth) {
        this.offset = 0;
      }
    },
  },
};
</script>

<style>
.carousel {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.carousel-container {
  display: flex;
  transition: transform 0.5s;
}

.carousel-item {
  width: 200px;
  flex-shrink: 0;
}

.carousel-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  padding: 10px;
  background-color: #ccc;
  border: none;
  color: #fff;
  cursor: pointer;
}

.carousel-button.prev {
  left: 10px;
}

.carousel-button.next {
  right: 10px;
}
</style>

这是一个基本的走马灯组件，它使用了一个容器来包含所有的项目，并通过改变`offset`属性来实现滚动效果。点击"Prev"和"Next"按钮可以切换项目。

请注意，这只是一个示例，你需要根据实际需求进行适当的修改和调整。