<template>this
<div class="index">spa
<div class="scroll">orm
<ul :style="{top}" :class="{transition:index!=0}">router
<li v-for="item in list" @click="hh">{{"第"+item+"條數據"}}</li>ip
<!-- <li>{{"第"+list[0]+"條數據"}}</li> -->it
</ul>io
</div>console
<router-link to="/">hello</router-link>form
</div>class
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
list: ["一", "二", "三", "四", "五", "六", "七", "八", "九", "十"],
top: "",
index: 0,
p: ""
};
},
mounted() {
this.goScroll();
},
methods: {
hh() {
alert(1);
},
goScroll() {
var _this = this;
this.p = setInterval(() => {
console.log(22);
_this.top = -60 * _this.index + "px";
if (_this.index >= this.list.length + 1) {
_this.index = 0;
_this.top = -0 + "px";
clearInterval(_this.p);
// _this.continueScroll();
this.goScroll();
} else {
_this.index++;
}
}, 2000);
}
// continueScroll() {
// var _this = this;
// setTimeout(() => {
// _this.index = 1;
// _this.top = -60 * this.index + "px";
// _this.index++;
// this.goScroll();
// }, 100);
// }
},
destroyed() {
clearInterval(this.p);
}
};
</script>
<style>
img {
width: 30px;
height: 30px;
border-radius: 50%;
vertical-align: middle;
margin-right: 20px;
}
ul {
position: relative;
}
li {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 80%;
height: 60px;
line-height: 60px;
text-align: left;
margin: 0;
font-size: 14px;
/* transform: scale(0.5); */
}
.scroll {
height: 60px;
overflow: hidden;
font-size: 0px;
position: relative;
}
.transition {
transition: top 2s;
}
</style>