uniapp [全端兼容] - 最新详细实现垂直无限上下自动滚动列表，消息列表每隔N秒无缝滚动丝滑流畅，动态自上而下不停滚动展示列表的每行数据，类似新闻动态、公告上下滚动列表、中奖信息公布栏、消息通知

前言

微信小程序版本，请访问 这篇文章。

在 uni-app 全平台兼容（H5网页网站、支付宝/微信小程序、安卓App、苹果App、nvue）项目开发中，详解完成 “列表上下无缝滚动效果，无限上下自动滚动列表” 垂直列表每隔一定时间就自动上下翻滚一次，每隔n秒就会自动向上位移一个带过渡动画，支持自定义列表显示几个、每次翻滚的时间间隔、列表的样式、每行的排版布局自由更改，适用于文章列表交替展示、新闻动态列表、垂直公告通知列表、滚动文字广播、获奖名单循环展示等场景。

uniapp（vue2 | vue3）版本项目均可使用，跟着教程复制代码即可。

---

如下图所示，您可以设置列表 “显示多少行”，每次滚动的 “间隔秒数”，另外样式自由修改不影响功能。

示例代码

具体实现代码如下，请直接复制