可以换一种思路，使用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如何做新闻列表上下滚动内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复