Vue实现几行滚动

Vue实现多行滚动效果

使用CSS实现多行滚动

通过CSS的overflow和white-space属性可以实现简单的多行文本滚动效果。

<template>
  <div class="scroll-container">
    <div class="scroll-content">
      <!-- 你的多行内容 -->
      第一行内容<br>
      第二行内容<br>
      第三行内容<br>
      第四行内容
    </div>
  </div>
</template>

<style>
.scroll-container {
  height: 100px; /* 固定高度 */
  overflow: hidden; /* 隐藏超出部分 */
  position: relative;
}

.scroll-content {
  position: absolute;
  white-space: normal; /* 允许换行 */
  animation: scroll 10s linear infinite;
}

@keyframes scroll {
  0% { transform: translateY(0); }
  100% { transform: translateY(-100%); }
}
</style>

使用Vue指令实现滚动

创建一个自定义指令来实现更灵活的滚动控制。

Vue.directive('scroll', {
  inserted(el, binding) {
    const speed = binding.value || 50;
    let position = 0;

    function scroll() {
      position--;
      if (-position >= el.scrollHeight - el.clientHeight) {
        position = 0;
      }
      el.style.transform = `translateY(${position}px)`;
      requestAnimationFrame(scroll);
    }

    scroll();
  }
});

使用指令：

<div v-scroll="30" style="height: 100px; overflow: hidden;">
  <!-- 多行内容 -->
</div>

使用第三方库vue-seamless-scroll

安装库：

npm install vue-seamless-scroll

使用示例：

import vueSeamlessScroll from 'vue-seamless-scroll'

export default {
  components: {
    vueSeamlessScroll
  },
  data() {
    return {
      list: ['内容1', '内容2', '内容3', '内容4']
    }
  }
}

模板：

<vue-seamless-scroll 
  :data="list" 
  class="seamless-warp"
  :class-option="optionHover">
  <ul>
    <li v-for="(item, index) in list" :key="index">{{item}}</li>
  </ul>
</vue-seamless-scroll>

响应式滚动实现

根据内容长度动态调整滚动速度。

export default {
  data() {
    return {
      content: '多行内容\n多行内容\n多行内容',
      scrollSpeed: 1,
      scrollPosition: 0
    }
  },
  mounted() {
    this.startScroll();
  },
  methods: {
    startScroll() {
      const container = this.$refs.container;
      const contentHeight = container.scrollHeight;
      const visibleHeight = container.clientHeight;

      if (contentHeight > visibleHeight) {
        this.scrollInterval = setInterval(() => {
          this.scrollPosition -= this.scrollSpeed;
          if (-this.scrollPosition >= contentHeight - visibleHeight) {
            this.scrollPosition = 0;
          }
          container.style.transform = `translateY(${this.scrollPosition}px)`;
        }, 20);
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.scrollInterval);
  }
}

触摸设备兼容性处理

添加触摸事件支持，在移动设备上暂停滚动。

export default {
  methods: {
    handleTouchStart() {
      clearInterval(this.scrollInterval);
    },
    handleTouchEnd() {
      this.startScroll();
    }
  }
}

模板中添加事件：

<div 
  @touchstart="handleTouchStart"
  @touchend="handleTouchEnd">
  <!-- 内容 -->
</div>