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:[
      {
        title: 'Ant Design Title 1',
        description:"Ant Design, a design language for background applications, is refined by Ant UED Team",
      },{
        title: 'Ant Design Title 2',
        description:"Ant Design, a design language for background applications, is refined by Ant UED Team  Ant Design, a design language for background applications, is refined by Ant UED Team",
      },{
        title: 'Ant Design Title 3',
        description:"Ant Design, a design language for background applications, is refined by Ant UED Team",
      },{
        title: 'Ant Design Title 4',
        description:"Ant Design, a design language for background applications, is refined by Ant UED Team  Ant Design, a design language for background applications, is refined by Ant UED Team",
      },{
        title: 'Ant Design Title 5',
        description:"Ant Design, a design language for background applications, is refined by Ant UED Team",
      },
    ],
    listMarginTop:"0",
    animate:false,
  }

  scrollUp= e =>{
    this.state.data.push(this.state.data[0]);
    let height=document.getElementById("scrollList").getElementsByTagName("li")[0].scrollHeight+1;
    this.setState({ 
      animate: true,
      listMarginTop: "-"+height+"px",
    }); 
    setTimeout(() => { 
      this.state.data.shift();    
      this.setState({ 
        animate: false,
        listMarginTop: "0",
      }); 
      this.forceUpdate();
    }, 2000)
  }
  
  scrollDown= e =>{
    let ulNode=document.getElementById("scrollList").getElementsByTagName("ul")[0];
    ulNode.firstChild.classList.remove("opacityAnimation");
    this.setState({ 
      animate: true ,
      listMarginTop: ulNode.lastChild.scrollHeight+"px"
    }); 
    setTimeout(() => { 
      this.state.data.unshift(this.state.data[this.state.data.length-1]);
      ulNode.firstChild.classList.add("opacityAnimation");
      this.state.data.pop();    
      this.setState({ 
        animate: false, 
        listMarginTop: "0",
      }); 
      this.forceUpdate();
    }, 1000)
  }
  
  startScrollUp= e =>{
    this.endScroll();
    this.scrollUp();
    scrollInterval=setInterval(this.scrollUp, 3000);
  }
  
  startScrollDown= e =>{
    this.endScroll();
    this.scrollDown();
    scrollInterval=setInterval(this.scrollDown, 3000);
  }
  
  endScroll= e =>{
     clearInterval(scrollInterval);
  }
 
  render () { 
     return ( 
       <div> 
        <div className="buttonContainer">
          <Button type="primary" onClick={this.startScrollUp}>向上滚动</Button>
          <Button type="primary" onClick={this.startScrollDown}>向下滚动</Button>
          <Button type="danger"  onClick={this.endScroll}>停止滚动</Button>
        </div>
        <div className="listContainer">
          <List
          itemLayout="horizontal"
          id="scrollList"
          style={{marginTop:this.state.listMarginTop}}
          className={this.state.animate ? "animate" : ''}
          dataSource={this.state.data}
          renderItem={item => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                title={<a href="https://ant.design">{item.title}</a>}
                description={item.description}
              />
            </List.Item>
          )}
         />
        </div>
      </div> 
     ) 
  } 
} 
ReactDOM.render(
  <App />,
  document.getElementById('app'),
);

css:

.buttonContainer,.listContainer{
  margin: 24px;
}
.buttonContainer button{
  margin:0 20px 0 0;
}
.listContainer{
  height:570px;
  width:448px;
  padding: 0 24px;
  border: 1px solid #ddd;
  overflow:hidden
}
.animate{
  transition:all .8s;
}
.opacityAnimation{
  animation:opacityAnimation 1s 1;
  -webkit-animation:opacityAnimation 1s 1; 
}
@keyframes opacityAnimation{
  from {opacity:0;}
  to {opacity:1;}
}
@-webkit-keyframes opacityAnimation {
  from {opacity:0;}
  to {opacity:1;}
}

demo地址：https://codepen.io/itguliang-the-selector/pen/EqPgXg

公众号文章同步：https://mp.weixin.qq.com/s/_eHXEHUlF6WYYSwNQbMDpg

原创文章，如需转载请注明出处，谢谢！