uniapp滚动消息列表

news2024/12/19 11:52:06

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

<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()
				}
			}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2262144.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

COMSOL快捷键及内置函数

文章目录 COMSOL快捷键使用COMSOL算子求最大值和最小值COMSOL内置函数3.1 解析函数3.2 插值函数3.3 分段函数3.4 高斯脉冲函数3.5 斜坡函数3.6 矩形函数3.7 波形函数3.8 随机函数3.9 Matlab函数3.10 SWITCH函数 COMSOL快捷键 Ctrl&#xff0b;/ 可快速打开预定义的物理量列表。…

QT绘制同心扇形

void ChartForm::paintEvent(QPaintEvent *) {QPainter painter(this);painter.setRenderHint(QPainter::Antialiasing);// 设置抗锯齿painter.save();// 设置无边框&#xff08;不需要设置QPen&#xff0c;因为默认是不绘制边框的&#xff09;QPen pen(Qt::NoPen);// QPen pen…

最大质因子序列

最大质因子序列 C语言代码C 代码Java代码Python代码 &#x1f490;The Begin&#x1f490;点点关注&#xff0c;收藏不迷路&#x1f490; 任意输入两个正整数m, n (1 < m < n < 5000)&#xff0c;依次输出m到n之间每个数的最大质因子&#xff08;包括m和n&#xff1b;…

ubuntu22.04编译安装Opencv4.8.0+Opencv-contrib4.8.0教程

本章教程,主要记录在Ubuntu22.04版本系统上编译安装安装Opencv4.8.0+Opencv-contrib4.8.0的具体过程。 一、下载opencv和opencv-contrib包 wget https://github.com/opencv/opencv/archive/refs/tags/4.8.0.zip wget https://github.com/opencv/opencv_contrib/archive/refs/…

AI芯片常见概念

文章目录 AI芯片常见概念前言常见概念AI芯片分类按照芯片的技术架构分GPU半定制化的 FPGA全定制化 ASIC神经拟态芯片 按应用场景分训练卡推理卡 按部署位置分国产AI卡资料汇总 封装相关Chiplet技术3DIC三星多芯片集成联盟&#xff08;Samsung Multi-Die Integration Alliance&a…

Fiddler(抓包测试工具)下载安装步骤

目录 介绍 主要功能&#xff1a; 使用场景&#xff1a; 一、下载 二、安装 ​编辑三、测试 介绍 Fiddler 是一个强大的网络调试工具&#xff0c;用于捕获和分析 HTTP/HTTPS 请求与响应。它通过代理服务器捕获流量&#xff0c;帮助开发者调试 Web 应用、API&#xff0c;进…

Elasticsearch-DSL高级查询操作

一、禁用元数据和过滤数据 1、禁用元数据_source GET product/_search {"_source": false, "query": {"match_all": {}} }查询结果不显示元数据 禁用之前: {"took" : 0,"timed_out" : false,"_shards" : {&quo…

gorm源码解析(四):事务,预编译

文章目录 前言事务自己控制事务用 Transaction方法包装事务 预编译事务结合预编译总结 前言 前几篇文章介绍gorm的整体设计&#xff0c;增删改查的具体实现流程。本文将聚焦与事务和预编译部分 事务 自己控制事务 用gorm框架&#xff0c;可以自己控制事务的Begin&#xff0…

什么是双声道立体声环绕声全景声 | 一文讲清楚沉浸式声音基本设定

目录 一、 沉浸式声音基本概念1. 声学上的沉浸式2. 空间音频技术3. 声源位置4. 人耳声音定位&#xff08;水平&垂直方向&#xff09;5. 人耳对声源距离定位的影响因素6. 头部相关传递函数7. 三维声技术8. “双耳”与“立体声”9. 耳机重放与扬声器重放10. 环绕声11. 高度声…

使用C语言库函数格式化输入时格式类型与数据类型不匹配导致程序异常

问题 使用两次sscanf()库函数从两个字符串中按照指定的格式读取数据&#xff0c;执行完毕后发现第一个正常读取的数据被篡改。项目在Ubuntu上使用CMake和Ninja构建项目&#xff0c;编译时没有错误和警告。 复现 为方便调试&#xff0c;在keil中编译stm32工程代替&#xff0c…

车牌识别之三:检测+识别的onnx部署(免费下载高精度onnx模型)

依赖 paddle2onnx1.3.1 onnxruntime-gpu1.14.0 ultralytics8.3.38背景 在车牌识别之一&#xff1a;车牌检测(包含全部免费的数据集、源码和模型下载&#xff09;我们得到了车牌检测模型&#xff1b; 在车牌识别之二&#xff1a;车牌OCR识别(包含全部免费的数据集、源码和模型…

WPF ControlTemplate 控件模板

区别于 DataTemplate 数据模板&#xff0c;ControlTemplate 是控件模板&#xff0c;是为自定义控件的 Template 属性服务的&#xff0c;Template 属性类型就是 ControlTemplate。 演示&#xff0c; 自定义一个控件 MyControl&#xff0c;包含一个字符串类型的依赖属性。 pub…

在IDE中使用Git

我们在开发的时候肯定是经常使用IDE进行开发的&#xff0c;所以在IDE中使用Git也是非常常用的&#xff0c;接下来以IDEA为例&#xff0c;其他的VS code &#xff0c;Pycharm等IDE都是一样的。 在IDEA中配置Git 1.打开IDEA 2.点击setting 3.直接搜索git 如果已经安装了会自…

Excel中如何消除“长短款”

函数微调可以可以实施&#xff0c;简单且易于操作的气球&#x1f388;涨缩更妙。 (笔记模板由python脚本于2024年12月17日 06:19:13创建&#xff0c;本篇笔记适合用Excel操作数据的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.python.org/ Fre…

微命令 微指令 微程序 微操作

微命令是计算机控制部件通过控制线向执行部件发出的各种控制命令&#xff0c;它是构成控制序列的最小单位 微命令与微操作是一一对应的关系&#xff0c;微命令是微操作的控制信号&#xff0c;而微操作是微命令的执行过程。在机器的一个CPU周期中&#xff0c;一组实现一定操作功…

Spring 不推荐使用@Autowired

Spring 不推荐使用Autowired 原因&#xff1a;为什么 Spring和IDEA 都不推荐使用 Autowired 注解_autowired为什么不推荐-CSDN博客 解决方法&#xff1a; 使用Resource注解。 使用构造函数注入。缺点显而易见&#xff0c;当成员变量很多时&#xff0c;构造函数代码冗长&#…

6、AI测试辅助-测试报告编写(生成Bug分析柱状图)

AI测试辅助-测试报告编写&#xff08;生成Bug分析柱状图&#xff09; 一、测试报告1. 创建测试报告2. 报告补充优化2.1 Bug图表分析 3. 风险评估 总结 一、测试报告 测试报告内容应该包含&#xff1a; 1、测试结论 2、测试执行情况 3、测试bug结果分析 4、风险评估 5、改进措施…

使用re模块

一、常量 常量说明 re.M re.MULTLINE 多行模式 re.S re.DOTALL 单行模式 re.I re.IGNORECASE 忽略大小写 re.X re.VERBOSE 忽略表达式的空白字符 可以使用|开启多个选项 二、方法 2.1 编译 compile re.compile(pattern,[,falgs]) pattern是正则表达式的字符串 设定falgs&…

自动驾驶控制与规划——Project 2: 车辆横向控制

目录 零、任务介绍一、环境配置二、算法三、代码实现四、效果展示 零、任务介绍 补全src/ros-bridge/carla_shenlan_projects/carla_shenlan_stanley_pid_controller/src/stanley_controller.cpp中的TODO部分。 一、环境配置 上一次作业中没有配置docker使用gpu&#xff0c;…

FFmpeg库之ffmpeg

文章目录 ffmpeg命令行使用基本命令选择流 -map选项 主要命令视频选项音频选项多媒体格式转换滤镜裁剪加水印画中画 录制查看可用的录制设备查看录制设备选项参数录制桌面录制窗口录制摄像头录制麦克风录制系统声音同时录制桌面和麦克风 直播推流拉流 ffmpeg命令行使用 ffmpeg…