vue 新闻列表滚动效果

vue

效果如下:

<template>
<div>
<div class="scroll-wrap">
<ul class="scroll-content" :style="{ top }" @mouseenter="Stop()" @mouseleave="Up()">
<li v-for="item in prizeList" v-bind:key="item.id"><a :href="item.src">{{item.name}}</a></li >
</ul>
</div>
</div>
</template>

<script>
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();
}
}
}
</script>
<style>
.scroll-wrap {
height: 150px;
overflow: hidden;
}

.scroll-content {
position: relative;
transition: top 0.5s;
}

.scroll-content p {
line-height: 50px;
text-align: center;
}
</style>

以上是 vue 新闻列表滚动效果 的全部内容, 来源链接: utcz.com/z/379999.html

回到顶部