Vue 无缝滚动

最新推荐文章于 2024-09-23 10:24:32 发布

_格鲁特宝宝

最新推荐文章于 2024-09-23 10:24:32 发布

阅读量1.3k

点赞数 1

分类专栏： Vue Web FrontEnd 文章标签： vue 无缝滚动滚动无缝滚动

_格鲁特宝宝原创，转载请务必注明出处

本文链接：https://blog.csdn.net/GrootBaby/article/details/103144187

版权

本文介绍了如何在Vue中使用vue-seamless-scroll组件来实现上下和左右的无缝滚动效果。该组件适用于需要滚动展示内容的场景，需要注意给父容器和ul容器设置合适的初始化样式。官方文档和在线演示链接也已提供。

摘要由CSDN通过智能技术生成

上下滚动与左右滚动是我们很常见的一个功能，利用vue-seamless-scroll可以实现上下滚动与左右滚动，

概述

基于vue的无缝滚动组件。

注意：需要给父容器一个height和:data='Array'和overfolw:hidden;左右滚动需要给ul容器一个初始化 css width。

其官方网站地址是 https://www.npmjs.com/package/vue-seamless-scroll 。

在线演示网址是 https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-others 。

基本相关配置参数介绍如下：

key	description	default	val
`step`	数值越大速度滚动越快	`1`	`Number`
`limitMoveNum`	开启无缝滚动的数据量	`5`

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

_格鲁特宝宝

关注关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

liMarquee.zip vue无缝滚动插件

11-27

在 Vue 应用中，有时候我们需要实现元素的无缝滚动效果，比如新闻滚动条、广告轮播等，这就是“vue滚动”这一标签所涵盖的内容。而“liMarquee.zip”则提供了一个针对Vue的无缝滚动插件，帮助开发者轻松实现这个功能...

Vue 自动轮播/跑马灯插件——vue-seamless-scroll

cc蒲公英的博客

07-27

2658

Vue 自动轮播/跑马灯插件——vue-seamless-scroll

参与评论您还未登录，请先登录后发表或查看评论

轮播 vue3-seamless-scroll （vite+vue3）

ybweb的博客

08-12

2703

大屏滚动无缝连接（vue3 vite）

vue3中使用vue3-scroll-seamless插件

最新发布

weixin_45535843的博客

09-23

506

【代码】vue3中使用vue3-scroll-seamless插件。

vue-seamless-scroll实现无缝上下滚动与左右滚动

诗雨远方的博客

01-08

1万+

vue-seamless-scroll实现无缝上下滚动与左右滚动上下滚动与左右滚动是我们很常见的一个功能，利用vue-seamless-scroll可以实现上下滚动与左右滚动，其官方网站地址是https://www.npmjs.com/package/vue-seamless-scroll，可以查看其用法。首先查看一下效果图：一、...

vue3-seamless-scroll无缝滚动组件使用

qq_59625204的博客

06-13

1346

【代码】vue3-seamless-scroll无缝滚动组件使用。

大屏可视化项目之vue3-seamless-scroll无缝滚动组件（一）——基本使用

weixin_44867717的博客

11-24

1万+

大屏可视化项目之vue3-seamless-scroll无缝滚动组件（一）——基本使用 vue3-seamless-scroll官网地址——Vue3.0 无缝滚动组件，支持Vite2.0 https://www.npmjs.com/package/vue3-seamless-scroll 效果图 1、安装 npm npm install vue3-seamless-scroll --save Yarn yarn add vue3-seamless-scroll browser <sc

A simple, seamless scrolling for Vue.js vue无缝滚动component.zip

04-03

"vue无缝滚动component"是一个专为Vue.js设计的组件，旨在为网页内容提供平滑、流畅的滚动体验，使得用户在浏览长列表或网格时感觉不到页面加载的过程，提升用户体验。该组件的核心功能在于实现“无缝”滚动效果，...

详解vue 自定义marquee无缝滚动组件

10-17

在本文中，我们将深入探讨如何在 Vue 中自定义一个基于 `marquee` 的无缝滚动组件。`marquee` 是一种创建滚动文本效果的方式，常用于网站中展示不断滚动的信息，如新闻标题或广告。然而，HTML5 中的原生 `marquee` ...

vue表格自动滚动

01-08

npm install vue-seamless-scroll --save main.js文件里面引入使用 import scroll from 'vue-seamless-scroll' Vue.use(scroll) html代码 css代码 .seamless-warp { height: 500px; overflow: hidden...

vue,原生js左右无缝滚动

09-03

在本文中，我们将深入探讨如何使用原生JavaScript实现Vue组件中的左右无缝滚动效果，并结合CSS进行样式设计。Vue.js是一个流行的前端框架，它允许开发者构建可复用、可维护的组件，而原生JavaScript则是其背后的基石...

vue-seamless-scroll（一个简单的基于vue.js的无缝滚动）

m0_51431448的博客

01-29

4937

一般在数据可视化项目中经常会看到无缝滚动的表格，即轮播表，我们可以使用 vue-seamless-scroll 来实现，使用起来也很方便。

【Vue轮播插件】常用的vue轮播插件整理

热门推荐

在热爱技术的路上一直前行。

06-28

1万+

现成的轮播插件是很方便，如果只是对文本类的数据进行轮播就很容易满足需求。但是，实际开发中，表格中可能还嵌套了自己封装的组件，组件中又是通过echarts图表来实现的。这个时候，这些vue插件多多少少都会出现bug，真是令人头疼啊…思前想后，还是把最近查到的知识整理一下，方便以后查看。...

官网广告商图标——无缝滚动——vue-seamless-scroll插件使用

yehaocheng520的博客

08-29

1017

官网广告商图标——无缝滚动——vue-seamless-scroll插件使用

在Vue3项目中使用 vue3-seamless-scroll 无缝滚动插件

都随它大小便吧

07-17

8542

有需求需要用到这个大腿们设计的无缝滚动插件（vue3-seamless-scroll），效果不错，记录一下使用过程。本插件不需要全局引用，只需要局部引用到页面中即可，主要有三个步骤，分别是引入、注册、使用。

Vue3中使用无缝滚动插件vue3-seamless-scroll

努力的nana

04-23

2620

表格中的列数据进行横向无缝滚动，某一列进行筛选的时候，重新请求后端的数据，进行刷新。

vue-seamless-scroll无缝滚动组件

weixin_63954739的博客

12-10

590

3.看官网组件的使用，一个小例子。

使用vue-seamless-scroll插件实现数据滚动

欢迎小伙伴们的评论和私信，工作日基本都会上来看看的哈

04-21

1066

呃，先将盗的图展示下，如下图所示，前端需要将后台返过来的数据，通过上下滚动的方式展示在前台页面，原生js也可以实现类似于轮播图效果嘿嘿，但是vue中有插件 vue-seamless-scroll 点击进入 vue-seamless-scroll官网 cmd中输入安装命令 cnpm install vue-seamless-scroll --save <template> <vue-seamless-scroll :data="listData" class="s

vue 列表平滑滚动插件（vue-seamless-scroll）

梁小茹的博客

03-17

1703

vue-seamless-scroll 滚动插件及文字太多实现向左滚动

vue 无缝滚动横向公告

12-13

以下是一个基于Vue实现的文字横向无缝滚动组件的代码示例： ```vue <template> <div class="marquee"> <div class="marquee-content" ref="marqueeContent"> <slot></slot> </div> </div> </template> <script> export default { name: 'Marquee', data() { return { timer: null, speed: 1, isPaused: false } }, mounted() { this.start() }, methods: { start() { this.timer = setInterval(() => { if (!this.isPaused) { const marqueeContent = this.$refs.marqueeContent const marqueeWidth = marqueeContent.offsetWidth const parentWidth = marqueeContent.parentNode.offsetWidth if (marqueeWidth - this.speed <= parentWidth) { marqueeContent.style.left = '0px' } else { marqueeContent.style.left = parseInt(marqueeContent.style.left || '0') - this.speed + 'px' } } }, 20) }, pause() { this.isPaused = true }, resume() { this.isPaused = false } }, beforeDestroy() { clearInterval(this.timer) } } </script> <style> .marquee { overflow: hidden; position: relative; } .marquee-content { position: absolute; white-space: nowrap; } </style> ``` 使用方法：在需要使用滚动公告的地方，引入该组件并使用`<marquee>`标签包裹需要滚动的内容即可，例如： ```vue <template> <div> <marquee> <span>这是第一条公告</span> <span>这是第二条公告</span> <span>这是第三条公告</span> </marquee> </div> </template> <script> import Marquee from '@/components/Marquee.vue' export default { name: 'Demo', components: { Marquee } } </script> ```