vue前端简单代码无需js,css实现无缝循环滚动播放滚动条上下滚动

381 阅读1分钟
  1. **# vue前端实现无缝循环滚动播放滚动条上下滚动**

  2. 1. 经常会用到盒子里面的内容或者列表需要自动循环滚动播放,

  3. 2. 有时候甚至需要鼠标放上去悬停滚动,鼠标移开继续滚动。

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

  5. 4. 并且滚动到最后一个数据时,无缝衔接从第一个数据开始循环滚动展示。

- 介绍一个很好用的插件:

第一步:终端下载npm install @david-j/vue-j-scroll --save-dev

image.png

第二步:去main.js中全局注册

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

第三步:用这个组件把需要滚动的内容包起来使用, 【切记外面盒子一定给【固定】的高】 image.png

image.png

image.png

步骤真的很简单,不用花费大量的js或者css代码就可以实现。