讲师中心 微信公众号
AI工具推荐 视频效率加速

uni-app怎么实现无限循环滚动 uni-app垂直跑马灯公告【技巧】

雨磊同学_6778

雨磊同学_6778

发布时间:2026-04-05 08:34:04

|

610人浏览过

|

来源于php中文网

原创

scroll-view垂直滚动公告无法无缝循环,因默认不支持自动复位;需手动拼接双份数据、监听滚动位置、用$nextTick重置scrollTop并关闭动画,配合节流与平台适配实现视觉无限滚动。

uni-app怎么实现无限循环滚动 uni-app垂直跑马灯公告【技巧】

uni-app里用scroll-view做垂直滚动公告,为什么滚到末尾就停了?

因为scroll-view默认不支持“无缝循环”,滚到底部后scrollTop无法自动跳回顶部——它不是marquee,没有原生循环逻辑。

真正能实现“视觉上无限滚动”的,是**手动复位 + 动画衔接**:把两份相同数据拼在一起,滚动到中间一份的末尾时,瞬间把scrollTop设为第一份的高度,人眼察觉不到跳变。

  • 必须用scroll-y开启纵向滚动,且scroll-top要绑定动态变量(比如scrollTop)
  • 列表数据得复制一遍:list.concat(list),否则没“冗余内容”可滑
  • 监听@scroll事件,当scrollTop接近“单份列表总高度”时,立刻重置并禁止动画过渡(否则会看到回弹)
  • 重置时要加this.$nextTick()确保DOM更新后再改scrollTop,否则无效

uni-app中scroll-view的scroll-top重置为什么经常失效?

常见原因是:在scroll回调里直接赋值this.scrollTop = 0,但此时滚动动画还没结束,框架会覆盖你的赋值;或者没关掉scroll-with-animation,导致重置被动画缓冲干扰。

  • 重置前务必关闭动画:scroll-with-animation="false"(模板中写死,别动态切)
  • 判断触发点别用scrollTop === scrollHeight - windowHeight,浮点误差和不同端计算差异大,改用scrollTop > singleHeight - 20更稳
  • 重置代码必须包在this.$nextTick(() => { this.scrollTop = offset })里,尤其在App端和微信小程序里缺了这步基本白搭
  • H5端要注意scroll-view内部元素不能有transform或flex:1撑高异常,否则scrollHeight算不准

数据重复拼接后,点击某条公告怎么定位到原始索引?

用户点的是第8条,但实际数据是[a,b,c,a,b,c],原始列表只有3条——不处理就会误判成第8条不存在。

  • 渲染时给每项加:data-index="index % originalList.length",这样DOM上存的是原始下标
  • 点击事件里用$event.currentTarget.dataset.index取值,而不是index参数
  • 别用v-for="(item, i) in doubledList"里的i去查原数组,它可能是5、6、7,而原始数组最大下标是2
  • 如果需要携带对象数据,建议在原始数据里加id字段,渲染时透传,比依赖下标更可靠

真机上滚动卡顿、跳帧,尤其是iOS微信里?

核心矛盾是:频繁修改scroll-top触发重排,iOS WebView对scroll-view的合成层优化差,一卡就是整屏掉帧。

  • 降低重置频率:不要每像素都判断,用throttle节流到50ms一次,或只在scrolltolower触发后才检查是否需重置
  • 避免在scroll回调里做复杂计算,比如反复调用getRect或遍历数组,全挪到mounted里预计算好singleHeight
  • 安卓和iOS表现差异大,iOS建议加style="will-change: scroll-position;"到scroll-view上(H5有效,小程序忽略)
  • 如果公告条数少于5条,别硬套循环方案——直接用setInterval改scrollTop做匀速滚动,更轻量也更稳

滚动循环的本质是障眼法,关键不在“怎么滚”,而在“什么时候悄无声息地切”。数据冗余、时机控制、平台差异,三者漏一个,用户一眼就看出断层。

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

Atoms
Atoms Hot

Atoms是一款AI智能体工具,第一支自动构建真实业务的 AI 团队。

PixPix
PixPix Hot

PixPix是一款面向电商视觉生产的AI商品图生成工具。

创客贴AI

创客贴AI是一款AI图像与设计工具,AI辅助的智能在线设计工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

码上飞
码上飞 Hot

一款基于自然语言的AI应用开发平台,可根据用户描述自动生成应用程序,帮助个人和团队快速完成应用原型与开发。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2823

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

6143

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

7090

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

6898

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

983

2024.05.22

html5动画制作有哪些制作方法
html5动画制作有哪些制作方法

html5动画制作方法有使用CSS3动画、使用JavaScript动画库、使用HTML5 Canvas等。想了解更多html5动画制作方法相关内容,可以阅读本专题下面的文章。

4611

2023.10.23

HTML与HTML5的区别
HTML与HTML5的区别

HTML与HTML5的区别:1、html5支持矢量图形,html本身不支持;2、html5中可临时存储数据,html不行;3、html5新增了许多控件;4、html本身不支持音频和视频,html5支持;5、html无法处理不准确的语法,html5能够处理等等。想了解更多HTML与HTML5的相关内容,可以阅读本专题下面的文章。

8168

2024.03.06

html5从入门到精通汇总
html5从入门到精通汇总

想系统掌握HTML5开发?本合集精选全网优质学习资源,涵盖免费教程、实战项目、视频课程与权威电子书,从基础语法到高级特性(Canvas、本地存储、响应式布局等)一应俱全,适合零基础小白到进阶开发者,助你高效入门并精通HTML5前端开发。

854

2025.12.30

Docker Desktop怎么设置端口映射
Docker Desktop怎么设置端口映射

本专题聚焦Docker Desktop容器端口映射与访问配置,整理从创建容器、设置端口绑定到验证本地服务访问的操作流程。针对端口被占用、映射配置错误、容器服务无法访问等情况,也提供相应的检查方向,方便用户完成端口配置。

0

2026.11.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn