vue 列表内容自动向上滚动_vue 新闻列表滚动效果
- {{item.name}}
export default {
name: 'complexTable',
data() {
return {
prizeList: [
{name: '城轨采购网', src: 'http://www.railunique.com'},
{name: '天津地铁电子采购平台', src: 'http://www.railunique.com'},
{name: '南昌地铁', src: 'http://www.railunique.com'},
{name: '南昌地铁', src: 'http://www.railunique.com'},
{name: '兰州地铁招标信息', src: 'http://www.railunique.com'},
{name: '西安公共资源交易中心', src: 'http://www.railunique.com'},
],
activeIndex: 0,
intnum: undefined
}
},
computed: {
top() {
return -this.activeIndex * 20 + 'px';
}
},
created() {
this.ScrollUp();
},
methods: {
ScrollUp() {
// eslint-disable-next-line no-unused-vars
this.intnum = setInterval(_ => {
if (this.activeIndex < this.prizeList.length) {
this.activeIndex += 1;
} else {
this.activeIndex = 0;
}
}, 1000);
},
Stop() {
clearInterval(this.intnum);
},
Up() {
this.ScrollUp();
}
}
}
.scroll-wrap {
height: 150px;
overflow: hidden;
}
.scroll-content {
position: relative;
transition: top 0.5s;
}
.scroll-content p {
line-height: 50px;
text-align: center;
}