vue3实现数据大屏内数据向上滚动，鼠标进入停止滚动 vue3+Vue3SeamlessScroll

1.效果图

2.npm下载依赖及main.js文件配置

 npm install vue3-seamless-scroll --save
 
 
 import vue3SeamlessScroll from 'vue3-seamless-scroll';
 app.use(vue3SeamlessScroll)

3.html代码

<div class="right_img2"
                         v-if="scrollFlag">
                        <img src="../../public/img/fitth.png"
                             alt=""
                             srcset="">
                        <ul class="right_box">
                            //设置宽的目的为让内容居中显示
                            <li style="width: 20%;">商户名称li>
                            <li style="width: 20%;">品类li>
                            <li style="width: 20%;">重量(kg)li>
                            <li style="width: 20%;">金额(￥)li>
                            <li style="width: 20%;">交易时间li>
                        ul>
                        <ul>
                            
                            <vue3-seamless-scroll class="v-s-s"
                                                  :list="scrollData"
                                                  :hover="true"
                                                  :singleHeight="32">
                                //隔行变色
                                <div class="v-s-s_item"
                                     v-for="(item, index) in scrollData"
                                     :key="index"
                                     :class="index % 2 === 0 ? 'even' : 'odd'">
                                    //设置宽的目的为让内容居中显示
                                    <div style="width: 20%;">{{ item.userName }}div>
                                    <div style="width: 20%;">{{ item.typeName }}div>
                                    <div style="width: 20%;">{{ item.totalWeight }}div>
                                    <div style="width: 20%;">{{ item.totalPrice }}div>
                                    <div style="width: 20%;">{{ item.createTime }}div>
                                div>
                            vue3-seamless-scroll>
                        ul>
                    div>

4.script

const getScrollData = ()=>{
        dataScreenApi.getScrollData().then((res) =>{
            scrollFlag.value = true
            scrollData = res.data
        })
       }

5.css

滚动代码
.v-s-s {
	height: 350px;
	overflow: hidden;
	font-size: 13px;
	text-align: center;
	color: aliceblue;
	.v-s-s_item {
		// 让子元素垂直居中显示
		display: flex;
		align-items: center;
		justify-content: space-between;
		text-align: center;
		// 主轴方向从左往右排列在一行
		flex-direction: row;
		padding-bottom: 15px;
	}
}
//隔行变色
.even {
	// background-color: #66B3FF;
	color: #66b3ff;
}