react实现无限循环滚动信息

最新推荐文章于 2024-08-09 07:56:54 发布

孤风随雨

最新推荐文章于 2024-08-09 07:56:54 发布

阅读量3.3k

点赞数 2

文章标签： react.js javascript

本文链接：https://blog.csdn.net/weixin_47723644/article/details/120846326

版权

本文介绍了如何在React中实现无限循环滚动信息的功能。通过两种思路实现：思路一是利用定时器更新数组并调整div位置，但效果不佳；思路二是在此基础上增加元素偏移，达到更好的滚动效果。同时，文章讲解了在React中获取节点的三种方法：document选择器、refs和findDOMNode。

摘要由CSDN通过智能技术生成

需求

后端传递过来的数据滚动显示，鼠标移入后停止滚动，鼠标移出后继续滚动，参考公司门户的公告信息栏

实现思路

思路一

在componentDidMount中定义一个定时器，每过1000ms触发一次事件，将数组中第一条数据push到数组中，再删除掉第一条数据，最后给div添加onMouEnter和onMouseLeave事件，让鼠标移入时清除定时器，鼠标移出时重新开启定时器。

代码：

class Roll extends React.Component{
  
  state = {
    list: [
      { title: '静夜思' },
      { title: '唐-李白' },
      { title: '窗前明月光' },
      { title: '疑是地上霜' },
      { title: '举头望明月' },
      { title: '低头思故乡' },
    ]
  }

  componentWillMount = () => {
    this.begin()
  }

  roll = () => {
    let arr = this.state.list;
    arr.push(this.state.list[0])
    arr.splice(0,1)
    t