<template>
<div class="test">
<div class="content" :style="{height:contentHiehgt+'px'}">
<div id="scrollContent">
<div
class="item"
v-for="i in 15"
:key="i"
:style="{ height: itemHeight + 'px' }"
>
{{ i }}
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
timeOut: null,
topNum: 0,
itemHeight: 30,
contentHiehgt: 300,
};
},
created() {
this.timeOut = setInterval(function() {
let obj = document.getElementById("scrollContent");
let objHeight = obj.offsetHeight;
if ((-this.topNum) > (objHeight-this.contentHiehgt)) {
this.topNum = 0;
} else {
this.topNum -= this.itemHeight;
}
obj.style.marginTop = this.topNum + "px";
obj.style.transition = "margin-top 1.5s cubic-bezier(0.63, 0.05, 0.26, 1.7)";
}.bind(this), 3000);
//这里.bind是因为this有问题,babel没解释箭头函数??
},
};
</script>
<style lang="less">
.content {
overflow-y: auto;
}
</style>
vue 实现 公告滚动效果
最新推荐文章于 2024-07-10 10:20:38 发布