两个相同的循环列表,循环滚动
html
<view class="winners_list uni-flex uni-column" :animation="animationData">
<view v-for="(item, index) in winnersList" :key="index" class="li uni-flex uni-column">
<img :src="item.img" alt="" />
<view>
<div class="info">
<span>
<text>{{ item.info }}</text>
</span>
<span>
<text>{{ item.date }}</text>
</span>
</div>
<div class="prize_name">
<text>{{ item.prize }}</text>
</div>
</view>
</view>
</view>
<view class="winners_list uni-flex uni-column" :animation="animationData">
<view v-for="(item, index) in winnersList" :key="index" class="li uni-flex uni-column">
<img :src="item.img" alt="" />
<view>
<div class="info">
<span>
<text>{{ item.info }}</text>
</span>
<span>
<text>{{ item.date }}</text>
</span>
</div>
<div class="prize_name">
<text>{{ item.prize }}</text>
</div>
</view>
</view>
</view>
javascript
//滚动
getHeight(Class) {
let query = uni.createSelectorQuery().in(this);
query
.selectAll(Class)
.boundingClientRect(data => {
this.height = data[0].height;
})
.exec();
},
prizeScroll() {
let speed = 50;
let animation = uni.createAnimation({
duration: this.getHeight('.winners_list') / speed,
timingFunction: 'linear',
delay: 0
});
this.animation = animation;
this.timer=setInterval(() => {
console.log('123');
if (this.scrollHeight >= this.height) {
this.stopScroll()
this.prizeScroll()
} else {
this.scrollHeight = this.scrollHeight + 1;
animation.translateY(-this.scrollHeight).step();
this.animationData = animation.export();
}
}, speed);
},
// 停止动画
stopScroll(){
if(this.timer){
clearInterval(this.timer)
}
this.animation.translateY(0).step();
this.scrollHeight = 0;
this.animationData = this.animation.export();
},
taBtn(index){
this.currentIndex=index;
if(index==1){
this.$nextTick(()=>{
this.prizeScroll();
})
}else{
this.stopScroll()
}
}