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