uniapp滚动消息列表
两个相同的循环列表,循环滚动
<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>
//滚动 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()}}