<template>
<div class="wrap">
<ul id="marquee">
<li v-for="(item,index) in lists" :key="index">{{item}}</li>
</ul>
</div>
</template>
<script type="text/ecmascript-6">
export default {
name: "Scroller",
props: ["lists"], // 父组件传入数据， 数组形式
methods: {
move() {
// 获取内容区宽度
let width = document.getElementById("marquee").scrollWidth;
let marquee = document.getElementById("marquee");
let speed = 10; // 位移距离
// 设置位移
setInterval(function() {
speed = speed - 1;
// 如果位移超过文字宽度，则回到起点
if (-speed >= width) {
speed = 500;
}
marquee.style.transform = "translateX(" + speed + "px)";
}, 40);
}
},
mounted: function() {
this.move();
}
};
</script>
<style scoped>
/*样式的话可以写*/
.wrap {
overflow: hidden;
color: red;
}
#box {
height: 100%;
}
ul,
li {
margin: 0;
padding: 0;
}
ul {
white-space: nowrap;
margin: 0 10px;
}
li {
height: 100%;
list-style: none;
margin-right: 10px;
display: inline-block;
}
</style>
子组件调用
<template>
<div class="aa">
<Scroller :lists="list" class="scrollContainer" />
</div>
</template>
<script>
import Scroller from "@/components/Scroll.vue"
export default {
components: { Scroller },
data() {
return {
list: ["欢迎大家来一起学习","在一起学习","一起学习","学无止境"]
};
}
};
</script>
<style scoped>
/*样式的话可以写*/
.scrollContainer {
/* color: red; */
font-size: 16px;
margin-left: 10px;
500px;
height: 30px;
border: 1px solid #000;
line-height: 30px;
overflow: hidden;
}
</style>