参考网址：https://www.jianshu.com/p/b6813193ca0d
<template>
<div class="wrap" :style="{height:height + 'px'}">
<div
class="box"
:style="{top: '-' + height + 'px', height: (height * actualMap.length) + 'px'}"
>
<div
class="item"
v-for="(item,index) in actualMap"
:key="index"
@click="showPreview(item)"
:style="{'height':height + 'px','line-height':height + 'px'}"
>
<div
class="inner_content"
:style="{'line-height':height/2 + 'px'}"
>{{item.rollTitle == "" ? item.title : item.rollTitle}}</div>
<div
class="amount_title"
:style="{'line-height':height/2 + 'px'}"
>{{item.pubTm|formatDate2}} · 浏览次数 {{item.viewCount}}</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: "selfCarousel", // 自定义标题栏走马灯
props: {
height: {
default: 40,
type: Number
},
contentArr: {
default: [],
type: Array
}
},
data() {
return {
box: null,
timer: undefined,
moveTimer: undefined,
index: 1
};
},
computed: {
actualMap: function() {
let Tmp = this.contentArr
? JSON.parse(JSON.stringify(this.contentArr))
: [];
if (this.contentArr.length > 0) {
Tmp.unshift(this.contentArr[this.contentArr.length - 1]);
Tmp.push(this.contentArr[0]);
}
return Tmp;
}
},
mounted() {
this.box = document.getElementsByClassName("box")[0];
this.inintTimer();
let _this = this;
$(".wrap").hover(
function(e) {
clearInterval(_this.timer);
_this.timer = undefined;
},
function() {
_this.inintTimer();
}
);
},
methods: {
showPreview(row) {
this.$emit("showPreview", row);
},
moveWidthIndex() {
var l = this.index * -this.height - this.box.offsetTop;
var count = 0;
clearInterval(this.moveTimer);
let self = this;
this.moveTimer = setInterval(function() {
count++;
self.box.style.top =
self.box.offsetTop + l / (self.contentArr.length * 2) + "px";
if (count >= self.contentArr.length * 2) {
clearInterval(self.moveTimer);
self.box.style.top = self.index * - self.height + "px";
}
}, 20);
},
nextStep() {
this.index++;
if (this.index == this.actualMap.length) {
this.index = 2;
this.box.style.top = "-" + this.height + "px";
}
this.moveWidthIndex();
},
inintTimer() {
let self = this;
this.timer = setInterval(function() {
self.nextStep();
}, 2000);
}
}
};
</script>
<style lang="less" scoped>
.wrap {
width: 100%;
position: relative;
overflow: hidden;
}
.box {
width: 100%;
position: absolute;
}
.item {
width: 100%;
}
.inner_content {
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 16px;
color: #333333;
}
.amount_title {
font-size: 14px;
color: #999999;
}
</style>
