<template>
|
<div class="c-animation-roll-list" :style="{height}">
|
<div class="_rool-box" ref="rollList" :style="{height}">
|
<div
|
v-for="(item, index) in data"
|
:key="index"
|
class="_rool-item"
|
ref="rollItem"
|
:style="styleFormatter(index)"
|
>
|
<slot :row="item" :index="index" :select-column="moveColumn" />
|
</div>
|
</div>
|
|
|
</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'vueName',
|
props: {
|
data: Array, // 数据列表
|
height: String, // 容器高度
|
rollHeight: [Number, String], // 每次滚动高度
|
columnHeight: { // 每行高度
|
type: [Number, String],
|
default: 30
|
},
|
minLenght: { // 每行高度
|
type: [Number, String],
|
default: 3
|
}, // 最小滚动行数
|
waitTime: [Number, String], // 滚动间隔时间
|
},
|
data () {
|
return {
|
rollIndex: 0,
|
moveColumn: 0, // 需要改变第几个的top
|
isLoading: true
|
}
|
},
|
mounted() {
|
if(this.isLoading) {
|
this.startScroll();
|
}
|
},
|
activated() {
|
if(!this.isLoading) {
|
this.startScroll();
|
}
|
|
},
|
methods: {
|
styleFormatter (index) {
|
return {
|
top: this.columnHeight*index + 'px',
|
}
|
},
|
startScroll() {
|
this.$nextTick(() => {
|
const element = this.$refs.rollItem;
|
const len = this.data.length;
|
let totalHeight = len*this.columnHeight;
|
let rollHeight = this.rollHeight ? this.rollHeight : this.columnHeight;
|
if (!element || len < Number(this.minLenght)) return;
|
this.scrollTimer = setInterval(() => {
|
for(let i = 0; i<element.length; i++) {
|
let elTop = element[i].style.top.split('px')[0];
|
element[i].style.top = +elTop - rollHeight +'px';
|
element[i].style.transition = '1s ease';
|
}
|
let moveHeight = this.rollIndex*rollHeight; // 移动高度
|
let moveNum = Math.floor(moveHeight/this.columnHeight) % len; // 移动了几个单元列表
|
// 记录上一次的循环并更改top值
|
if(this.rollIndex && (moveNum > this.moveColumn || (moveNum == 0 && this.moveColumn == len - 1))) {
|
element[this.moveColumn].style.transition = 'none';
|
element[this.moveColumn].style.top = totalHeight - 2*this.columnHeight + 'px';
|
this.moveColumn++;
|
if(this.moveColumn > len - 1) {
|
this.moveColumn = 0
|
}
|
}
|
this.rollIndex++
|
}, this.waitTime || 1000);
|
});
|
}
|
},
|
deactivated() {
|
this.isLoading = false;
|
clearInterval(this.scrollTimer);
|
},
|
beforeDestroy() {
|
clearInterval(this.scrollTimer);
|
}
|
}
|
</script>
|
|
<style scoped lang="less">
|
.c-animation-roll-list {
|
color: #fff;
|
width: 100%;
|
overflow: hidden;
|
position: relative;
|
._rool-box {
|
position: relative;
|
width: 100%;
|
._rool-item {
|
position: absolute;
|
width: 100%;
|
transition: none;
|
// transition: 1s ease;
|
|
}
|
}
|
}
|
|
|
</style>
|
