多条数据向上滚,React 列表向上、向下循环滚动"/>
css动画多条数据向上滚,React 列表向上、向下循环滚动
实现的效果:
效果图.gif
实现步骤
开始滚动:setInterval() 定时调用滚动方法
停止滚动:clearInterval() 取消定时器
向上滚动方法:
1、数组第一条添加到数组末尾 - push()
2、列表向上滚动添加css3过渡动画
3、计算向上滚动距离(第一条数据高度,如果高度固定用固定值即可)
4、删除数组第一条数据 - shift()
5、向上滚动距离清零
6、取消过渡动画停止滚动
向下滚动方法:
1、列表向下滚动添加css3过渡动画
2、计算向下滚动距离(最后一条数据高度,如果高度固定用固定值即可)
3、数组最后一条数据添加到数组头部 - unshift()
4、第一条数据添加渐显动画
5、删除数组最后一条数据 - pop()
6、向上滚动距离清零
7、取消过渡动画停止滚动
注:Demo 用的ant design 组件,自己写思路也是一样的
部分代码
js:
const { Button,List, Avatar } = antd;
let scrollInterval='';
class App extends React.Component {
state = {
data:[
{
更多推荐
css动画多条数据向上滚,React 列表向上、向下循环滚动
发布评论