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

                        
                        

                            //设置宽的目的为让内容居中显示
                            
商户名称
                            
品类
                            
重量(kg)
                            
金额(￥)
                            
交易时间
                        
                        

                            
                            
                                //隔行变色
                                

                                    //设置宽的目的为让内容居中显示
                                    
{{ item.userName }}
                                    
{{ item.typeName }}
                                    
{{ item.totalWeight }}
                                    
{{ item.totalPrice }}
                                    
{{ item.createTime }}
                                
                            
                        
                    

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;
}