常用的vue轮播组件,vue.js轮播图
本文主要介绍vue j对轮播效果、滚动公告、内聚的简单实现。文章的详细内容围绕主题的相关信息展开，有一定的参考价值，有需要的小伙伴可以参考一下。
目录
分析，初步实现，收敛，完善，所有代码前言：
滚动容易实现；但是需要联系，所以需要处理。下面主要用vue实现前后连接的功能。
分析
1.需要实现上图的html树形结构；(红色框)要显示的框；然后里面包一个盒子(绿色盒子)；绿色框(黄色框)中有多个数据要滚动；2.我们需要看的东西只会显示在红框里；所以需要设置溢出：隐藏超越隐藏；这样，多余的绿框数据就看不到了；3.现在我们打算用定位顶来控制红框中显示的绿框的位置；这样，我们可以展示我们需要的东西；4.用一个计时器让他们动起来；控制定时器的顶部位置-；5.每条内容需要暂停2秒后才能继续滚动；
初步实现
先声明一个变量，用于控制绿框的top，绑定到绿框：
//html
div class= list :style= { top:list top px }
.
/div
//数据
list top:0；
这里我希望是向上滚动，所以需要控制listTop--;
setInterval(()={
this . list top-=1；
},20)
现在绿色盒子已经滚动了。
但我们需要上下贯通，才不会到最后就停止滚动，或者突然跳到最上面。
衔接
为了解决收敛性，我们引入一个想法：
当滚动到第二个元素时，在元素的末尾插入第一个元素，然后将框的顶部重置为0。
这样我们只会滚动前两个元素，然后操纵元素的位置，把第一个插入到最后；因为我用vue遍历数组，所以只需要操作数组。同样，原生js是操作dom的。
//数据
列表：[1111，2222，3333]，
列表顶部：0，
//方法
//假设我把每个元素的高度设为40px
setInterval(()={
this . list top-=1；
if(this.listTop===40){
this . list . push(this . list . splice(0，1)[0])；//删除数组的第一个元素，并将其插入数组的后面
this . list top=0；//重置顶部
}
},20)
完善
上面已经实现了元素滚动效果。
但是现在我们需要在继续切换之前显示每个元素2秒钟。这样，控制定时器的执行时间就足够了。
//数据
列表：[1111，2222，3333]，
列表顶部：0，
//方法
//假设我把每个元素的高度设为40px
setScroll(){
var t=setInterval(()={
this . list top-=1；
if(this.listTop===-40){
this . list . push(this . list . splice(0，1)[0])；//删除数组的第一个元素，并将其插入数组的后面
this . list top=0；//重置顶部
间隙(t)；//取消计时器
//设置定时器2秒后执行，重新开始滚动。
setTimeout(()={
this . set scroll()；
},2000)
}
},20)
}
全部代码
贴上全部代码，以下为vue语法：
//html
div class=box
div class= list :style= { top:list top px }
div v-for=(item，index) in list :key=index
{{item}}
/div
/div
/div
//css。方框{
高度：40px
行高：40px
溢出：隐藏；
位置：相对；
}。列表{
位置：绝对；
左：0；
}
//js
data(){
返回{
列表：[1111，2222，3333]，
列表顶部：0，
}
},
已安装(){
this . set scroll()；
},
方法：{
setScroll(){
var t=setInterval(()={
this . list top-=1；
if(this.listTop===-40){
this . list . push(this . list . splice(0，1)[0])；//删除数组的第一个元素，并将其插入数组的后面
this . list top=0；//重置顶部
间隙(t)；//取消计时器
//设置定时器2秒后执行，重新开始滚动。
setTimeout(()={
this . set scroll()；
},2000)
}
},20)
}
}
关于vue j简单实现轮播效果，滚动公告，收敛的这篇文章到此为止。更多相关vue融合功能，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。