react 手写列表自动轮播

最新推荐文章于 2024-06-26 17:18:07 发布

杨乐多00

最新推荐文章于 2024-06-26 17:18:07 发布

阅读量289

点赞数 1

文章标签： react.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_59380960/article/details/130554243

版权

    <div style={{height: '80%',"overflowY": 'auto',margin:0}} id="review_box" 
                 onMouseEnter={()=>{rollStop()}} onMouseLeave={()=>{rollStart(60)}}>
            <ul style={{margin:0}} id="comment1">
                 {
                    tdtzList.map((item,index)=>{
                       return (
                           <li key={index}>
                               <div className='left'>{item.outage_time}</div>
                                <div className='right'>{item.outage_area}</div>
                           </li>
                            )
                       }) 
                  }
              </ul>
    </div>

   const [timer,setTimer] = useState(null) // 定时器    
   
   useEffect(()=>{
        roll(60)
        return()=>{
            //清理副作用
            clearInterval(timer)
        }
   },[])

   const rollStop =()=>{
        clearInterval(timer)
    }
    const rollStart =(t)=>{
        var ulbox = document.getElementById("review_box");
        rollStop();
        setTimer(setInterval(()=>{
            // 当滚动高度大于列表内容高度时恢复为0
            if (ulbox.scrollHeight - ulbox.scrollTop === ulbox.clientHeight) {
                ulbox.scrollTop = 0;
            } else {
                ulbox.scrollTop++;
            }
        }, t))
    }
   const roll = (t)=> {
      var ulbox = document.getElementById("review_box");
      ulbox.scrollTop = 0;
      rollStart(t);
    }

        #review_box{
            li{
                display: flex;
                height: 40px;
                line-height: 40px;
                margin: 0 10px;
                color: #10b3b3;
                .left{
                    width: 45%;
                }
                .right{
                    width: 50%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }
            li:nth-child(even){
                background-color: #f6fbff;
            }
        }
        /* 设置滚动条的样式 */
        #review_box::-webkit-scrollbar {
            width: 0px;
            height: 0px;
        }