vue前端简单实现无缝循环滚动自动播放，滚动条上下滚动，鼠标悬停，从鼠标 ...

项目中经常会有地方需要用到，写下来记录一下

1、 经常会用到盒子里面的内容大概列表需要自动循环滚动播放

2、有时候乃至需要鼠标放上去悬停滚动，鼠标移开继续滚动。

3、更有需要跟随鼠标上下滚动，鼠标滚到什么地方，从哪里开始继续滚动

4、并且滚动到末了一个数据时，无缝衔接从第一个数据开始循环滚动展示

介绍一个很好用的插件：无需用js和css，几行代码下载插件就可以

1、终端下载npm install @david-j/vue-j-scroll --save-dev

2、去main.js中全局注册

1. // 自动滚动
2. import VueScroll from "@david-j/vue-j-scroll";
3. Vue.use(VueScroll);

复制代码

3、第三步：用这个组件把需要滚动的内容包起来使用，
【切记表面盒子一定给【固定】的高】

1.        <div class="scroll-container">
2.           <vue-j-scroll
3.             :autoplay="true"
4.             :speed="1"
5.             :step="0.1"
6.             :direction="'up'"
7.             :data="data"
8.             style="height: 500px"
9.           >
10.             <!-- direction设置为'up'表示上下滚动，autoplay设置为true表示自动播放，speed表示滚动速度，step表示每次滚动的步长。 -->
11.             <ul>
12.               <li></li>
13.               <li>1</li>
14.               <li>2</li>
15.               <li>3</li>
16.               <li>4</li>
17.             </ul>
18.           </vue-j-scroll>
19.         </div>

复制代码

步骤真的很简单，这个插件底层原理应该是js代码，我们直接拿过来用就需要在项目中写花费大量的js大概css代码就可以实现。真香了。觉得有用请你点个赞

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。