Vue实现上下左右无缝滚动,鼠标移入并暂停

最新推荐文章于 2024-07-08 18:31:57 发布
最新推荐文章于 2024-07-08 18:31:57 发布
阅读量2k 收藏 11
点赞数 3
分类专栏： Vue 文章标签： vue.js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hong521520/article/details/120268457
版权
本文介绍如何在Vue项目中实现上下左右无缝滚动，并在鼠标悬停时暂停滚动。通过安装vue-seamless-scroll组件，设置滚动速度、方向、起始条数和滚动条数，结合CSS调整样式，实现超过4条数据后的无限循环滚动效果。详细步骤包括安装、引入、注册组件以及属性和样式的配置。
摘要由CSDN通过智能技术生成

在这里插入图片描述
需求:超过4条数据就开始无限循环滚动

在线文档:https://chenxuan1993.gitee.io

使用vue-seamless-scroll组件步骤:

一:安装

npm install vue-seamless-scroll --save

二:在用到的页面引入和注册组件

<script>
import vueSeamlessScroll from "vue-seamless-scroll";
export default {
   
  name: "test-abnormal-dynamics",
  components:{
   vueSeamlessScroll},
 }
<<
最低0.47元/天 解锁文章
一个橙子呀
关注
  • 3
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
文字弹幕，左右滚动 vue
weixin_43983711的博客
12-11 900
1.轮播图 <div> <van-swipe :duration="6000" :autoplay="3000" indicator-color="red" immediate="true" :show-indicators="false"...
vue的无缝滚动插件：vue-seamless-scroll
欧唯薇
08-16 3031
1、npm安装 npm install vue-seamless-scroll --save 2、引入 import scroll from 'vue-seamless-scroll' 官方demo:https://chenxuan1993.gitee.io/component-document/index_prod#/component/seamless-default 3、使用 ...
【Vue3】vue3-seamless-scroll实现无缝滚动+滚轮控制
最新发布
Salted fish in hand, I have the world.
07-08 1316
前言 目标 1 掌握vue3-seamless-scroll使用方法 2 vue2是否可以使用vue3-seamless-scroll插件 基本使用 前期工作 创建一个vue3项目，在项目中安装第三方组件 1 安装 npm install vue3-seamless-scroll --save 2 引入并注册 登...
vue-seamless-scroll数据量少时，暂停滚动，继续滚动
weixin_45532305的博客
01-10 3403
获取数据后并渲染到dom后，查看最后一个子元素是否在父元素的可视范围内，如果在就禁止vue-seamless-scroll复制数据和自动滚动行为，反之则允许。大屏项目：指定dom元素内，如果子元素内容过多，超出父元素的最高高度，可以发生自动滚动；如果子元素内容没有超出父元素的最高高度，不可以发生自动滚动。通过最后一个子元素offsetTop和父元素的clientHeight比较。
vue-seamless-scroll 动态开启和关闭滚动
weixin_45799605的博客
01-03 3770
vue-seamless-scroll 动态开启和关闭滚动
vue3实现数据大屏内数据向上滚动，鼠标进入停止滚动 vue3+Vue3SeamlessScroll
m0_72929120的博客
11-15 1916
【代码】vue3实现数据大屏内数据向上滚动，鼠标进入停止滚动 vue3+Vue3SeamlessScroll。
vue实现鼠标移入移出事件代码实例
10-17
在Vue.js中，实现鼠标移入（mouseenter）和移出（mouseleave）事件是常见的交互功能，主要用于添加动态效果或提供额外的信息。以下是对标题和描述中提到的知识点的详细解释： 1. **Vue事件绑定**： 在Vue中，我们...
vue,原生js左右无缝滚动
09-03
在本文中，我们将深入探讨如何使用原生JavaScript实现Vue组件中的左右无缝滚动效果，并结合CSS进行样式设计。Vue.js是一个流行的前端框架，它允许开发者构建可复用、可维护的组件，而原生JavaScript则是其背后的基石...
vue实现消息的无缝滚动效果的示例代码
08-28
Vue 实现消息的无缝滚动效果的示例代码 一、标题解释： "vue 实现消息的无缝滚动效果的示例代码" 这个标题主要介绍了如何使用 Vue 框架来实现消息的无缝滚动效果。这个标题直奔主题，直接告诉读者这篇文章的主要...
vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法
10-18
今天小编就为大家分享一篇vue鼠标移入添加class样式,鼠标移出去除样式(active)实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue实现公告栏文字上下滚动效果的示例代码
10-15
在Vue.js框架中，实现公告栏文字上下滚动的效果，可以通过利用Vue的动态组件和过渡效果来完成。这个功能在许多网页应用中常见，用于展示滚动通知或公告。下面将详细介绍如何使用Vue实现这一效果。 首先，我们需要...
Vue实现横向无缝滚动
weixin_38680881的博客
06-24 6267
需求描述 需要实现一个信息条横向无缝滚动，鼠标移上停止滚动移开继续滚动的效果如下图， 技术实现 本着高效开发的目的，第一步自然是去找有没有合适现成的轮子就直接用了。果然vue-seamless-scroll就能完美实现以上要求。于是封装了一个基于vue-seamless-scroll的信息横向无缝滚动组件 安装vue-seamless-scroll npm install vue-seamless-scroll -S　　 新建marqueex.vue 组件并引入vue-seamless-scro
Vue 表格循环滚动，鼠标移入暂停，移出继续滚动
cdd9527的博客
11-04 1170
Vue 表格循环滚动，鼠标移入暂停，移出继续滚动
vue中如何运用vue-seamless-scroll超简单实现自动无限循环滚动和停顿滚动效果
weixin_66071584的博客
01-04 834
样式根据自己想要的调整就行，具体手册里写的都有，
vue-seamless-scroll 不自动滚动解决方法
qq_37025418的博客
08-31 8004
项目场景： 在子页面使用vue-seamless-scroll 问题描述： 没有自动滚动，鼠标移上去，才触发自动滚动 原因分析： 数据需要在页面挂载好就赋值，否则页面在加载完成后，数据呜发自动滚动 解决方案： 在mounted或data种给list赋值，下面介绍一下vue-seamless-scroll 的使用方法 1.安装vue-seamless-scroll npm install vue-seamless-scroll --save　 2.引入主键 import vueSea
使用vue-seamless-scroll无法滚动问题
HHHHH2187的博客
10-23 1765
【代码】使用vue-seamless-scroll无法滚动问题。
vue使用vue-seamless-scroll实现上下自动滚动
tianbushengyinuo的博客
08-26 2307
效果图： vue使用vue-seamless-scroll实现上下自动滚动 一、使用： 1、安装vue-seamless-scroll npm install vue-seamless-scroll --save 2、在组件引入vue-seamless-scroll import vueSeamlessScroll from 'vue-seamless-scroll' compone
VUE实现文字左右滚动跑马灯
热门推荐
jiopp的博客
09-06 1万+
直接上代码 // 在components中定义一个可引用的组件 // 此功能封装并非原创，在网上看到的，哪里看的忘了 // components 部分 <template> <div class="my-outbox"> <div class="my-inbox" ref='box'> <div class="my-list" v-for="(...
vue 做文字滚动
梁小茹的博客
11-03 1741
vue 文字滚动
vue3实现左右照片无缝滚动轮播图
09-21
Vue.js 3可以使用transition组件和v-for指令来实现左右照片无缝滚动轮播图。首先，你需要设置一个容器元素来包裹照片，并设置它的宽度为照片的宽度的n倍，其中n为照片的数量。然后，使用v-for指令在容器中循环渲染照片。接下来，使用transition组件和transform属性来实现左右滚动效果。最后，使用setInterval函数来实现自动切换照片的功能。 代码示例如下： ```html <template> <div class="carousel-container"> <transition-group name="carousel-slide" tag="div"> <div v-for="(photo, index) in photos" :key="index" class="carousel-slide-item"> <img :src="photo" alt="photo" /> </div> </transition-group> </div> </template> <script> export default { data() { return { photos: [ "photo1.jpg", "photo2.jpg", "photo3.jpg", // 添加更多照片 ], currentIndex: 0, intervalId: null, }; }, mounted() { this.startAutoSlide(); }, beforeUnmount() { this.stopAutoSlide(); }, methods: { startAutoSlide() { this.intervalId = setInterval(() => { this.slideRight(); }, 3000); }, stopAutoSlide() { clearInterval(this.intervalId); }, slideLeft() { this.currentIndex = (this.currentIndex - 1 + this.photos.length) % this.photos.length; }, slideRight() { this.currentIndex = (this.currentIndex + 1) % this.photos.length; }, }, }; </script> <style> .carousel-container { width: 100%; overflow: hidden; } .carousel-slide-item { float: left; width: 100%; } .carousel-slide-enter-active, .carousel-slide-leave-active { transition: transform 0.5s; } .carousel-slide-enter, .carousel-slide-leave-to { transform: translateX(100%); } </style> ```
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值