react实战笔记 —— 无限循环滚动列表实例

一个比较实用的实例，自上而下循环无缝滚动

1. 首先创建一个带有id的元素，id要加给需要滚动的元素

// 在react中元素要写到render中
render() {
//data是上级元素传过来的所以需要对象解构出来。
let {data} = this.props;
       this.scrollRow = 1;
       return (
           <div className={s.container}>
           // id要加给需要滚动的元素，也就是子元素们的父元素壳子，这里是ul-li所以给ul加id
           //注意一个页面中如果有多个滚动循环组件，务必id不同，否则会出现无法循环的问题
               <div className={s.scrollItemBar} id={'scrollBox1'}>
                   <ul id={'con11'} className={s.ul}>
                   //循环创建li的函数
                       {this.createLiOption(data)}
                   </ul>
                   // 进行一个判断，li（也就是数据条数）大于20个才显示第二个ul(和第一个一模一样，实现的是无缝效果，实际就是2个ul在连接着滚动)
                   {data.length >= 20 && <ul id={'con22'} className={s.ul}>
                       {this.createLiOption(data)}
                   </ul>}
               </div>
           </div>
       )
   }

// 循环创建li的函数（this.createLiOption(data)）
//根据接收的数组数据,循环提取,放置展示标签,并返回
   createLiOption(data) {
       let backData = [];
       if (data) {
           data.forEach((item, index) => {
               let {id, name} = item;
               backData.push(
                   <li className={s.li} key={index}>
                       <div className={s.pid}>{id}</div>
                       <div className={s.pname}>{name}</div>
                   </li>
               )
           });
           return backData;
       }
       return null;
   }

2.在生命周期函数中写滚动函数

componentWillUnmount() {
        if (undefined !== this.myTimer) {
            clearInterval(this.myTimer);
        }
    }

componentDidUpdate() {
        let box = document.getElementById('scrollBox1');
        this.scrollUp();
        this.myTimer = setInterval(this.scrollUp, 60);
        // 鼠标移入container 元素上 清除定时器 停止滚动
        box.onmouseover = () => {
            clearInterval(this.myTimer);
        }
        // 鼠标移出container 元素上 继续滚动
        // 60表示每隔60毫秒向上滚动一次
        box.onmouseout = () => {
            this.myTimer = setInterval(this.scrollUp, 60);
        }
    }
// 滚动效果的函数
scrollUp() {
        let box = document.getElementById('scrollBox1');
        let con1 = document.getElementById('con11');
        let con2 = document.getElementById('con22');
        if (box.scrollTop >= con1.offsetHeight) {
            box.scrollTop = 0;
        } else {
            box.scrollTop++;
        }
    }

3.样式部分

//样式不唯一，可自行发挥。
.container {
    width: 98.5%;
    /*height: 28.3%;*/
    height: 44.3%;
    float: left;
    margin-left: 0.5%;
    margin-top: 0.5%;
    border: #dbdbdb solid 1px;
    border-radius: 5px;
    position: relative;
    background-color: white;
    overflow: hidden;
}
.scrollItemBar {
    position: relative;
    width: 100%;
    height: 79%;
    overflow: hidden;
    margin-top: 0.5%;
}

总结：一个比较实用的react循环滚动小实例，如果有什么问题欢迎大家评论区指出，谢谢大家