vue marquee原生实现

<template>

<div class="index">

<div class="scroll">

<ul :style="{top}" :class="{transition:index!=0}">

<li v-for="item in list" @click="hh">{{"第"+item+"条数据"}}</li>

<!-- <li>{{"第"+list[0]+"条数据"}}</li> -->

</ul>

</div>

<router-link to="/">hello</router-link>

</div>

</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>

 

转载于:https://my.oschina.net/u/4004801/blog/3058497