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循环滚动小实例,如果有什么问题欢迎大家评论区指出,谢谢大家

  • 1
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值