94 lines
2.1 KiB
Vue
94 lines
2.1 KiB
Vue
<template>
|
||
<view>
|
||
<view class="maoScroll-main" :style="'height:'+(lineHeight*showLine)+'rpx;'">
|
||
<view :style="'margin-top:-'+marginTop+'rpx;'">
|
||
<view v-for="(item,index) in showdata" :key="'maoScroll'+index" :style="'height:'+lineHeight+'rpx;'">
|
||
<slot :line="item" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'maoScroll',
|
||
data() {
|
||
return {
|
||
showdata: [],
|
||
marginTop: 0,
|
||
showLine: 0,
|
||
}
|
||
},
|
||
props:{
|
||
data: {
|
||
type: Array,
|
||
default: []
|
||
},
|
||
showNum: {
|
||
type: Number,
|
||
default: 3,
|
||
},
|
||
lineHeight: {
|
||
type: Number,
|
||
default: 60,
|
||
},
|
||
animationScroll: {
|
||
type: Number,
|
||
default: 500,
|
||
},
|
||
animation: {
|
||
type: Number,
|
||
default: 2000,
|
||
}
|
||
},
|
||
watch: {
|
||
data(list) {
|
||
this.init();
|
||
},
|
||
|
||
},
|
||
methods: {
|
||
init: function(){
|
||
if(this.data != null && this.data != undefined && this.data != 'undefined' && this.data != ''
|
||
&& this.data.length > 0){
|
||
this.showLine = this.showNum < this.data.length ? this.showNum : this.data.length;
|
||
for(let i = 0; i < this.data.length; i++){
|
||
this.showdata.push(this.data[i]);
|
||
}
|
||
for(let i = 0; i < this.showLine; i++){
|
||
this.showdata.push(this.data[i]);
|
||
}
|
||
setInterval(this.animationFunc, this.animation);
|
||
}
|
||
},
|
||
animationFunc: function(){
|
||
if(this.marginTop >= this.data.length*this.lineHeight){
|
||
this.marginTop = 0;
|
||
}
|
||
let stepTime = this.animationScroll/this.lineHeight;
|
||
var step = 0;
|
||
let self = this;
|
||
var rollContinue = true // 由于下面的计时器不能及时终止，会导致有时候滚动像素过多（即margintop多加了几个像素），所以用这个控制一下。像滚动距离够了之后，不再增加margintop值
|
||
var index = setInterval(function(){
|
||
if(rollContinue){
|
||
self.marginTop = self.marginTop + 1;
|
||
}
|
||
step++;
|
||
if (step >= self.lineHeight) {
|
||
rollContinue = false;
|
||
clearInterval(index);
|
||
}
|
||
}, stepTime);
|
||
}
|
||
},
|
||
mounted() {
|
||
this.init();
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.maoScroll-main{width: 100%;overflow: hidden;}
|
||
</style>
|