概述
可以换一种思路，使用transition实现
- {{item.name}}
export default {
data () {
return {
prizeList: [
{ name: 0 },
{ name: 1 },
{ name: 2 },
{ name: 3 },
{ name: 4 }
],
activeIndex: 0
}
},
computed: {
top() {
return - this.activeIndex * 50 + 'px';
}
},
mounted() {
setInterval(_ => {
if(this.activeIndex < this.prizeList.length) {
this.activeIndex += 1;
} else {
this.activeIndex = 0;
}
}, 1000);
}
};
.scroll-wrap{
width: 200px;
height: 50px;
border: 1px solid blue;
overflow: hidden;
}
.scroll-content{
position: relative;
transition: top 0.5s;
li{
line-height: 50px;
text-align: center;
}
}
效果
最后
以上就是自然羽毛为你收集整理的vue商品列表滚动效果_vue如何做新闻列表上下滚动的效果的全部内容，希望文章能够帮你解决vue商品列表滚动效果_vue如何做新闻列表上下滚动的效果所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复