vue3-seamless-scroll实现循环滚动

1、安装依赖:

cnpm i vue3-seamless-scroll

2、新建一个.vue文件,在template中添加如下代码:

<vue3-seamless-scroll

:list="warningList"

class="seamless-warp"

:step="0.2"

:hover="true"

>

<ul class="warning_list">

<li v-for="(item, index) in warningList" :key="index">

<el-row>

<el-col :span="10" class="reason"> {{ item.reason }}</el-col>

<el-col :span="10">{{ item.address }}</el-col>

<el-col :span="4">{{ item.time }}</el-col>

</el-row>

</li>

</ul>

</vue3-seamless-scroll>

3、js中引入:import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';

4、给vue3-seamless-scroll添加如下样式:

.seamless-warp {

height: 300px;

width: 800px;

overflow: hidden;

}

相关推荐
不想有bug的小菜鸟2 分钟前
vue3使用iframe全屏展示pdf效果
前端·pdf
m0_748238633 分钟前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端
u0100559604 分钟前
前端代理,解决跨域问题讲解
前端
quitv9 分钟前
react脚手架配置别名
前端·javascript·react.js
m0_5287238117 分钟前
前端如何进行性能优化
前端·性能优化
化作繁星19 分钟前
在 Vue 3 中,如何缓存和复用动态组件
前端·vue.js·缓存
一粒沙-39 分钟前
iOS 将GIF图分享至微信
前端·ios
graywen43 分钟前
从文本到图像:SSE 如何助力 AI 内容实时呈现?(Typescript篇)
前端
一只小姜丝3321 小时前
解决各大浏览器中http地址无权限调用麦克风摄像头问题
网络·vue.js·网络协议·http
Gazer_S2 小时前
【现代前端框架中本地图片资源的处理方案】
前端·javascript·chrome·缓存·前端框架