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代码

<!-- scrollFlag为true时再渲染,vue3只要涉及到传值子页面需要加flag判断，否则子页面出现获取不到值的情况  -->
<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>
                            <!-- singleHeight：单步运动停止的高度 -->
                            <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;
}