Vue3无缝滚动效果

属性

● list // arrList
● direction // — up down
● speed // scroll speed

使用方法

1.引入

import VueSeamlessRolling from '@/components/VueSeamlessRolling.vue'

2.注册组件

components: {
	VueSeamlessRolling,
}

3.应用

<VueSeamlessRolling :speed="50" :list="tableList" direction="up">
  --需要无缝滚动的列表--
</VueSeamlessRolling>

4.滚动组件代码

<script lang="ts" setup>
import { defineProps, onMounted, ref, nextTick, onUnmounted } from 'vue'

const props = defineProps({
  list: Array,  // arrList
  direction: {  // --- up down
    type: String,
    default: () => 'up'
  },
  speed: { // scroll speed
    type: Number,
    default: () => 50
  }
})
const vueSeamlessRolling = ref()
const translateValue = ref(0)
const timer = ref<any>(null)
// 播放
const run = () => {
  nextTick(() => {
    if (props.direction === 'up') {
      if (typeof vueSeamlessRolling.value.clientHeight === 'number') {
        timer.value = setInterval(() => {
          if (translateValue.value < -(vueSeamlessRolling.value.clientHeight / 2)) {
            translateValue.value = 0
          }
          translateValue.value--
        }, props.speed)
      }
    }
    if (props.direction === 'down') {
      if (typeof vueSeamlessRolling.value.clientHeight === 'number') {
        timer.value = setInterval(() => {
          if (translateValue.value > 0) {
            translateValue.value = -(vueSeamlessRolling.value.clientHeight / 2)
          }
          translateValue.value++
        }, props.speed)
      }
    }
  })
}
const stop = () => {
  clearInterval(timer.value)
}
onMounted(() => {
  switch (props.direction) {
    case 'up':
      translateValue.value = 0
      break
    case 'down':
      translateValue.value = -(vueSeamlessRolling.value.clientHeight / 2)
      break
  }
  run()
})
onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<template>
  <div class="vue-seamless-rolling" ref="vueSeamlessRolling"
       :style="{transform: `translateY(${translateValue}px)`}"
       @mouseover="stop" @mouseout="run">
    <slot></slot>
    <slot></slot>
  </div>
</template>

<style scoped>
.vue-seamless-rolling {
  overflow: hidden;
  transition: transform 0ms ease-in 0s;
}
</style>