如何在大屏项目上面自己写一个竖屏滚动轮播效果

本文介绍了如何在大屏项目上利用Vue和JavaScript创建一个竖屏滚动轮播效果。主要步骤包括设置静态样式、初始化数据变量、在mounted生命周期钩子中启动轮播、在beforeDestroy中清除定时器,以及定义滚动方法和事件处理。关键代码包括在data中定义scroll和speed变量,以及在methods中实现滚动逻辑。
摘要由CSDN通过智能技术生成

只需要分以下几部分就可以实现功能如下:
1.正常描写静态样式后调入接口
在这里插入图片描述
2.在data里面自定变量接下来会用到,如果你不是子组件的话props可以忽略在这里插入图片描述
3.第三部重点代码,此时注意最外层DIV一定要给一个高度并且设置溢出隐藏。
在这里插入图片描述
最后贴代码:
data属性里面
scroll: -1, //定时器中使用。当表格滚动完了自动从第一条数据开始重复滚动
speed: 100, //定时器执行时间间隔
myInterval: “”, //设置定时器
在mounted里面别忘了开始方法
mounted() {
this.init();
},
清除定时
beforeDestroy() {
clearInterval(this.myInterval);
},
方法
methods:{
init() {
mydemo2.innerHTML = mydemo01.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值