1、首先安装插件依赖库

npm install vue3-seamless-scroll --save

2、在需要使用的页面引入组件

这块是局部使用，不是常用的组件，没必要做全局引用，只在需要的页面引入即可

import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'

3、完整代码

html部分

<template>
  <div class="jv-new dis-clm">
     <div class="jv-tt">实时快讯</div>
     <div class="jv-tn">
       <Vue3SeamlessScroll
           ref="cScroll"
           :list="rows"
           :step="0.5"
           :limit-scroll-num="5">
           <ul>
                <li v-for="(item,index) in rows" :key="index">祝贺{{item.agentname}}喜签一张{{item.productnamenew}}。</li>
           </ul>
       </Vue3SeamlessScroll>
     </div>
  </div>
</template>

js部分

<script setup>
import { ref,toRefs,nextTick } from "vue";
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
let props = defineProps({
  rows:Object
})
const cScroll = ref();
const { rows } = toRefs(props)

nextTick(()=>{
  cScroll.value.Reset();
})

</script>

css部分

.jv-tn{padding:13px 29px;height: 160px;overflow-y: hidden;transition: transform 0.9s ease-in-out;}
.jv-tn ul li,.news-item{
  background: url("@/assets/images/zzimg/sz.png") no-repeat 2px 5px;background-size: 12px auto;line-height: 30px;padding-left: 20px;
  border-bottom: 1px solid #666666;font-size: 13px;color: #5B5B5B;margin-bottom: 3px;
}

注释：

limit-scroll-num 显示的条数    step 控制的速度

相关属性