当前位置: 首页 > news >正文

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

http://www.mrgr.cn/news/80378.html

相关文章:

  • 游戏引擎学习第38天
  • 【Spark】Spark性能调优
  • Android无障碍服务监听实现自动点击按钮
  • 《Java 与 C 语言在人工智能领域的交互协同之道》
  • Docker创建一个mongodb实例,并用springboot连接 mongodb进行读写文件
  • 安卓导出历史记录为CSV文件的实现详解
  • OpenCV函数及其应用
  • dev类似于excel的数据编辑
  • Next.js流量教程:核心 Web Vitals的改善
  • ARM Cortex-A7 MPCore 架构
  • XML基础学习
  • 【时间序列分析】皮尔森相关系数理论基础及python代码实现
  • Spring Framework 路径遍历漏洞复现(CVE-2024-38819)
  • Redis篇-21--运维篇3-集群(分片,水平扩展,高可用,集群配置案例,扩展哨兵案例)
  • .Net WebAPI(一)
  • 【网络安全】Web Timing 和竞争条件攻击:揭开隐藏的攻击面
  • Vulhub:Redis[漏洞复现]
  • 交通道路上的车辆,人,自行车摩托车自动识别数据集,使用YOLO,COCO,VOC格式对2998张原始图片标注
  • 51c视觉~YOLO~合集6~
  • C/C++包含头文件的两种方式:尖括号方式 (<>)和双引号方式 (““)的区别
  • ubuntu服务器木马类挖矿程序排查、及安全管理总结
  • 【CSS in Depth 2 精译_079】第 13 章:渐变、阴影与混合模式概述 + 13.1:CSS 渐变效果(上)——使用多个颜色节点
  • 深度学习——激活函数、损失函数、优化器
  • 简单了解一下 Go 语言的构建约束?
  • F-Cooper论文精读
  • Apache Kylin最简单的解析、了解