实现：vue---列表循环滚动，鼠标悬浮停止

最新推荐文章于 2024-09-03 15:59:41 发布

宋芳芳

最新推荐文章于 2024-09-03 15:59:41 发布

阅读量1.3k

点赞数 1

分类专栏： vue 文章标签： vue 动画前端

本文链接：https://blog.csdn.net/fang0321/article/details/123878100

版权

本文介绍了如何在Vue项目中实现列表的循环滚动，并在鼠标悬浮时暂停滚动效果。首先，安装vue-seamless-scroll插件并在main.js中引入。接着，使用该组件并配置相关属性，如holeCountData存储列表数据，optionHover为一个处理悬浮事件的函数，seamless-warp作为包裹盒并设置overflow为hidden。然后，在computed属性中定义optionHover函数，最后调整seamless-warp的样式以完成滚动效果。

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

第一步：安装插件

npm install vue-seamless-scroll --save

第二步：在main.js直接导入使用

import scroll from 'vue-seamless-scroll' 
Vue.use(scroll)

第三步：使用 vue-seamless-scroll标签，标签中的属性：

data属性的值holeCountData是列表数据

class-option属性的值optionHover是一个函数，下面会说明

seamless-warp是此盒子的样式，设置成溢出隐藏

<vue-seamless-scroll :data="holeCountData"  :class-option="optionHover" class="seamless-warp">
            <div class="table_list" v-for="(item,index) in holeCountData" :key="index">
              <div>
                <el-tooltip placement="top">
                  <div style="max-width: 500px"