更新记录

1.0.0（2023-05-29） 下载此版本

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

平台兼容性

uni-app

其他

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

项目思路

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

近期在开发项目中用到了此类组件，也在插件市场上找了好多 要么用不了 要么有闪动卡顿 实在没办法 只能自己自己做一个出来 顺便分享一下思路 研究了好久 最终决定使用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% 一直循环下去

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

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

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