用户名
Email
论坛
潜水/灌水快乐,沉淀知识,认识更多同行。
ToB圈子
加入IT圈,遇到更多同好之人。
朋友圈
看朋友圈动态,了解ToB世界。
ToB门户
了解全球最新的ToB事件
博客
Blog
排行榜
Ranklist
文库
业界最专业的IT文库,上传资料也可以赚钱
下载
分享
Share
导读
Guide
相册
Album
记录
Doing
应用中心
帖子
本版
文章
帖子
ToB圈子
用户
免费入驻
产品入驻
解决方案入驻
公司入驻
案例入驻
登录
·
注册
只需一步,快速开始
账号登录
立即注册
找回密码
用户名
自动登录
找回密码
密码
登录
立即注册
首页
找靠谱产品
找解决方案
找靠谱公司
找案例
找对的人
专家智库
悬赏任务
圈子
SAAS
IT评测·应用市场-qidao123.com技术社区
»
论坛
›
软件与程序人生
›
前端开发
›
vue前端简单实现无缝循环滚动自动播放,滚动条上下滚动 ...
vue前端简单实现无缝循环滚动自动播放,滚动条上下滚动,鼠标悬停,从鼠标 ...
莫张周刘王
论坛元老
|
2024-11-11 16:46:10
|
显示全部楼层
|
阅读模式
楼主
主题
1800
|
帖子
1800
|
积分
5400
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要
登录
才可以下载或查看,没有账号?
立即注册
x
项目中经常会有地方需要用到,写下来记录一下
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代码就可以实现。真香了。觉得有用请你点个赞
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
回复
举报
0 个回复
倒序浏览
返回列表
快速回复
高级模式
B
Color
Image
Link
Quote
Code
Smilies
您需要登录后才可以回帖
登录
or
立即注册
本版积分规则
发表回复
回帖并转播
回帖后跳转到最后一页
发新帖
回复
莫张周刘王
论坛元老
这个人很懒什么都没写!
楼主热帖
06、etcd 写请求执行流程
网上书店管理系统项目【Java数据库编程 ...
软件测试项目实战经验附视频以及源码【 ...
【云原生】三、详细易懂的Docker 容器 ...
如何用同一套账号接入整个研发过程? ...
四、WinUI3下TitleBar的自定义
DevOps工具选型,什么才是中小企业的最 ...
面向大规模神经网络的模型压缩和加速方 ...
攻防世界pwn题:实时数据检测 ...
c# sqlsugar,hisql,freesql orm框架全 ...
标签云
集成商
AI
运维
CIO
存储
服务器
登录参与点评抽奖加入IT实名职场社区
下次自动登录
忘记密码?点此找回!
登陆
新用户注册
用其它账号登录:
关闭
快速回复
返回顶部
返回列表