uniapp滚动消息列表

两个相同的循环列表,循环滚动

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()
				}
			}
相关推荐
我这一生如履薄冰~5 分钟前
css属性pointer-events: none
前端·css
brzhang11 分钟前
A2UI:但 Google 把它写成协议后,模型和交互的最后一公里被彻底补全
前端·后端·架构
coderHing[专注前端]20 分钟前
告别 try/catch 地狱:用三元组重新定义 JavaScript 错误处理
开发语言·前端·javascript·react.js·前端框架·ecmascript
UIUV36 分钟前
JavaScript中this指向机制与异步回调解决方案详解
前端·javascript·代码规范
momo10036 分钟前
IndexedDB 实战:封装一个通用工具类,搞定所有本地存储需求
前端·javascript
liuniansilence36 分钟前
🚀 高并发场景下的救星:BullMQ如何实现智能流量削峰填谷
前端·分布式·消息队列
再花36 分钟前
在Angular中实现基于nz-calendar的日历甘特图
前端·angular.js
GISer_Jing1 小时前
今天看了京东零售JDS的保温直播,秋招,好像真的结束了,接下来就是论文+工作了!!!加油干论文,学&分享技术
前端·零售
Mapmost1 小时前
【高斯泼溅】如何将“歪头”的3DGS模型精准“钉”在地图上,杜绝后续误差?
前端
废春啊1 小时前
前端工程化
运维·服务器·前端