更新记录

1.0.0（2023-05-29）

通过定时器 控制元素样式 使用最少的代码 实现流畅的无限滚动效果 1.供参考和学习 因为每家产品样式也都不一样 就不做详细封装了 主要提供思路

平台兼容性

无限滚动 无缝衔接滚动中奖名单 兼容多端

项目思路

通过定时器 控制元素样式 使用最少的代码 实现流畅的无限滚动效果 供参考和学习 因为每家产品样式也都不一样 就不做详细封装了 主要提供思路

近期在开发项目中用到了此类组件，也在插件市场上找了好多 要么用不了 要么有闪动卡顿 实在没办法 只能自己自己做一个出来 顺便分享一下思路 研究了好久 最终决定使用css的过渡动画实现这个功能 做法就是 拿到数据后 多复制份数据到数组中 用来做空白区的数据填充 例如

getList().then((res) => {
    // res.data 值为 [1,2,3,4,5,6,7,8,9]
    const list = [...res.data,...res.data]
    // 结果 [1,2,3,4,5,6,7,8,9,1,2,3,4,5,6,7,8,9]
})

通过定时器 给窗口区内的元素增加 过度动画 和 向上移动自身-50% 开始第一次滚动

  transition: all 8s linear 0s;
 transform: translateY(-50%)

完成第一次过度后刚好停留在 list 的第9个索引的位置 也就是1 这个时候可以开启新一轮滚动了 先清除之前设置的过渡动画 设置 内容自身的位置 【transition，transform】 清除完成后 再次添加 过度动画 和 向上移动自身-50% 一直循环下去

注意：定时器时间需要和过度动画的时候 保持一致 不然会出现卡顿 页面关闭时记得停止定时器

该项目只是提供一些个人的无限滚动实现思路 如果有好的建议可以私信聊聊

如有问题可扫码添加微信，备注说明对应的插件名称