vue实现数据动态滚动

Vue 实现数据动态滚动

使用 CSS 动画实现平滑滚动

通过 CSS 的 animation 和 transform 属性实现滚动效果。在 Vue 中，可以动态绑定样式来控制滚动。

<template>
  <div class="scroll-container">
    <div 
      class="scroll-content" 
      :style="{ transform: `translateY(${scrollPosition}px)` }"
    >
      <div v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      scrollPosition: 0,
      scrollSpeed: 1
    };
  },
  mounted() {
    this.startScrolling();
  },
  methods: {
    startScrolling() {
      setInterval(() => {
        this.scrollPosition -= this.scrollSpeed;
        if (this.scrollPosition <= -this.$el.querySelector('.scroll-content').clientHeight) {
          this.scrollPosition = 0;
        }
      }, 30);
    }
  }
};
</script>

<style>
.scroll-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}
.scroll-content {
  position: absolute;
  width: 100%;
  transition: transform 0.1s linear;
}
</style>

使用 Vue 的 <transition-group> 实现列表滚动

通过 <transition-group> 和动态更新列表数据实现滚动效果。

<template>
  <div class="scroll-container">
    <transition-group name="scroll" tag="div">
      <div v-for="(item, index) in visibleItems" :key="item.id" class="item">
        {{ item.text }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, text: 'Item 1' },
        { id: 2, text: 'Item 2' },
        { id: 3, text: 'Item 3' },
        { id: 4, text: 'Item 4' },
        { id: 5, text: 'Item 5' }
      ],
      visibleItems: [],
      currentIndex: 0
    };
  },
  mounted() {
    this.updateVisibleItems();
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.items.length;
      this.updateVisibleItems();
    }, 1000);
  },
  methods: {
    updateVisibleItems() {
      this.visibleItems = [
        ...this.items.slice(this.currentIndex),
        ...this.items.slice(0, this.currentIndex)
      ];
    }
  }
};
</script>

<style>
.scroll-container {
  height: 200px;
  overflow: hidden;
}
.item {
  height: 40px;
  line-height: 40px;
}
.scroll-enter-active, .scroll-leave-active {
  transition: all 0.5s;
}
.scroll-enter, .scroll-leave-to {
  opacity: 0;
  transform: translateY(20px);
}
</style>

使用第三方库实现高级滚动效果

如果需要更复杂的滚动效果，可以使用第三方库如 vue-seamless-scroll。

安装库：

npm install vue-seamless-scroll

使用示例：

<template>
  <vue-seamless-scroll 
    :data="items" 
    :class-option="scrollOption"
    class="scroll-container"
  >
    <div v-for="(item, index) in items" :key="index" class="item">
      {{ item }}
    </div>
  </vue-seamless-scroll>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll';
export default {
  components: { vueSeamlessScroll },
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      scrollOption: {
        direction: 1,
        limitMoveNum: 3,
        step: 1,
        hoverStop: true,
        singleHeight: 40,
        waitTime: 1000
      }
    };
  }
};
</script>

<style>
.scroll-container {
  height: 200px;
  overflow: hidden;
}
.item {
  height: 40px;
  line-height: 40px;
}
</style>

使用 JavaScript 原生 API 实现滚动

通过 requestAnimationFrame 实现高性能滚动效果。

<template>
  <div class="scroll-container" ref="container">
    <div class="scroll-content" ref="content">
      <div v-for="(item, index) in items" :key="index">
        {{ item }}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5'],
      scrollPosition: 0,
      scrollSpeed: 1,
      animationId: null
    };
  },
  mounted() {
    this.startScrolling();
  },
  beforeDestroy() {
    cancelAnimationFrame(this.animationId);
  },
  methods: {
    startScrolling() {
      const scroll = () => {
        this.scrollPosition -= this.scrollSpeed;
        if (this.scrollPosition <= -this.$refs.content.clientHeight) {
          this.scrollPosition = 0;
        }
        this.$refs.content.style.transform = `translateY(${this.scrollPosition}px)`;
        this.animationId = requestAnimationFrame(scroll);
      };
      this.animationId = requestAnimationFrame(scroll);
    }
  }
};
</script>

<style>
.scroll-container {
  height: 200px;
  overflow: hidden;
  position: relative;
}
.scroll-content {
  position: absolute;
  width: 100%;
}
</style>