当前位置:首页 » 《我的小黑屋》 » 正文

vue前端简单实现无缝循环滚动自动播放,滚动条上下滚动,鼠标悬停,从鼠标滚动到哪里开始滚动超好用

3 人参与  2024年11月15日 09:21  分类 : 《我的小黑屋》  评论

点击全文阅读


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

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

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

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

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

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

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

2、去main.js中全局注册

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

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

       <div class="scroll-container">          <vue-j-scroll            :autoplay="true"            :speed="1"            :step="0.1"            :direction="'up'"            :data="data"            style="height: 500px"          >            <!-- direction设置为'up'表示上下滚动,autoplay设置为true表示自动播放,speed表示滚动速度,step表示每次滚动的步长。 -->            <ul>              <li></li>              <li>1</li>              <li>2</li>              <li>3</li>              <li>4</li>            </ul>          </vue-j-scroll>        </div>

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


点击全文阅读


本文链接:http://zhangshiyu.com/post/186378.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 霍景琛,苏晚,林深昔年请深如海,终不敌薄凉附加(霍景琛,苏晚,林深)(昔年请深如海,终不敌薄凉)全本浏览阅读连载中
  • 新章速递汤安甯,白子奕,汤贝贝是什么小说(结婚十年,回归家庭的老婆在外有二胎了)完本阅读无广告(结婚十年,回归家庭的老婆在外有二胎了)
  • 娇牛马导师偷我论文99篇成功升博导,我让他牢底坐穿精校文本_周老师师姐师兄爽文_小说后续在线阅读_无删减免费完结_
  • 独家顾宇,罗薇:结局+番外精编之作(资助生装阔气,我可不参加)电子书畅享阅读
  • 宗门全员重生,小师妹摆烂不干了(君拂君芙蓉)_宗门全员重生,小师妹摆烂不干了
  • 成了高考状元后,我倒欠两百万完结txt_阿姨叶青江安TOP10_小说后续在线阅读_无删减免费完结_
  • 嫁绝嗣长官,好孕作精在七零躺赢小说(顾嘉宁)序章+全章阅读(嫁绝嗣长官,好孕作精在七零躺赢)最新章节
  • 秦安,温千雪:+后续现已上架(大宋:开局错把皇帝当亲爹):结局+番外评价五颗星
  • 八零我被判黑五类下矿区后,手撕兼祧两房的丈夫无法释怀_陈叙张悦翠花新鲜出炉_小说后续在线阅读_无删减免费完结_
  • 开局签到天人修为,建立无上神朝无法释怀_叶玄后续+完结_小说后续在线阅读_无删减免费完结_
  • ,沐小暖番外(恶毒后娘她真香)TXT+后续+结局在线阅读
  • 萌萌,多多,阿钰小说(我妈的执念)+前传(萌萌,多多,阿钰)阅读

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1