react實(shí)現(xiàn)無限循環(huán)滾動(dòng)信息
本文實(shí)例為大家分享了react實(shí)現(xiàn)無限循環(huán)滾動(dòng)信息的具體代碼,供大家參考,具體內(nèi)容如下
需求
后端傳遞過來的數(shù)據(jù)滾動(dòng)顯示,鼠標(biāo)移入后停止?jié)L動(dòng),鼠標(biāo)移出后繼續(xù)滾動(dòng),參考公司門戶的公告信息欄
實(shí)現(xiàn)思路
思路一
在componentDidMount中定義一個(gè)定時(shí)器,每過1000ms觸發(fā)一次事件,將數(shù)組中第一條數(shù)據(jù)push到數(shù)組中,再刪除掉第一條數(shù)據(jù),最后給div添加onMouEnter和onMouseLeave事件,讓鼠標(biāo)移入時(shí)清除定時(shí)器,鼠標(biāo)移出時(shí)重新開啟定時(shí)器。
代碼:
class Roll extends React.Component{ state = { list: [ { title: '靜夜思' }, { title: '唐-李白' }, { title: '窗前明月光' }, { title: '疑是地上霜' }, { title: '舉頭望明月' }, { title: '低頭思故鄉(xiāng)' }, ] } componentWillMount = () => { this.begin() } roll = () => { let arr = this.state.list; arr.push(this.state.list[0]) arr.splice(0,1) this.setState({ list: arr, }) console.log(this.state.list); } begin = () => { this.timer = setInterval(() => { this.roll() }, 1000); } stop = () => { clearInterval(this.timer) } render () { return ( <div onMouseEnter={this.stop} onMouseLeave={this.begin} className='box'> {this.state.list.map(item => { return ( <p> {item.title} </p> ) })} </div> ) } }
效果圖:
可以看到實(shí)現(xiàn)出來的效果并不好,沒有往上偏移的效果,所以有了思路二。
思路二
在思路一的基礎(chǔ)上進(jìn)行修改,在componentDidMount中定義定時(shí)器,每次向上偏移幾個(gè)px,當(dāng)偏移到一定距離后,將數(shù)組中第一條數(shù)據(jù)push到數(shù)組中,再刪除掉第一條數(shù)據(jù),最后給div添加onMouEnter和onMouseLeave事件。
js文件
class Roll extends React.Component{ state = { list: [ { title: '這是消息1' }, { title: '這是消息2' }, { title: '這是消息3' }, { title: '這是消息4' }, { title: '這是消息5' }, { title: '這是消息6' }, { title: '這是消息7' }, { title: '這是消息8' }, { title: '這是消息9' }, ], count: 0, } // 頁面掛載時(shí)開啟定時(shí)器 componentDidMount = () => { this.begin() } // 定時(shí)器 begin = () => { this.timer = setInterval(() => { this.Roll() }, 10); } // 關(guān)閉定時(shí)器 stop = () => { clearInterval(this.timer) } // 每次向上偏移0.5px,使用state儲(chǔ)存偏移的次數(shù) Roll = () => { this.setState({ count: this.state.count+1 }) this.refs.roll.style.top = -0.5*this.state.count+'px'; // 當(dāng)偏移量達(dá)到40px時(shí),將數(shù)組中第一個(gè)數(shù)據(jù)剪切到數(shù)組的最后,再減去一行高度對(duì)應(yīng)的偏移次數(shù) if(-0.5*this.state.count <= -40){ let arr = this.state.list; arr.push(this.state.list[0]) arr.splice(0,1); this.setState({ list: arr, count: this.state.count - 50, }) this.refs.roll.style.top = (this.state.count*(-0.5)) + 'px' } } render(){ return ( <div className="box" onMouseEnter={this.stop} onMouseLeave={this.begin}> <div className="content" ref='roll'> {this.state.list.map((item)=>{ return ( <p className='row'> <a href="#" rel="external nofollow" > {item.title} </a> </p> ) })} </div> </div> ) } }
css文件
.box{ width: 300px; height: 160px; border: 1px solid black; margin: 200px 300px; position: relative; overflow: hidden; } .content{ position: absolute; top: 0px; } .row{ height: 20px; margin: 5px auto; }
效果圖:
獲取節(jié)點(diǎn)
1.document獲取節(jié)點(diǎn)
之前是真的沒想到react里也能使用document獲取元素節(jié)點(diǎn),和js里一樣的用法
2.refs獲取
通過this.refs.xxx獲取
componentDidMount = () => { console.log(this.refs.test); } render () { return ( <div ref='test'> 123 </div> ) }
3.findDOMNode獲取
通過ReactDom.findDOMNode(this)來獲取
this為當(dāng)前組件的實(shí)例
componentDidMount = () => { console.log(ReactDom.findDOMNode(this)); } render () { return ( <div className='test'> 123 </div> ) }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
react結(jié)合bootstrap實(shí)現(xiàn)評(píng)論功能
這篇文章主要為大家詳細(xì)介紹了react結(jié)合bootstrap實(shí)現(xiàn)評(píng)論功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05React?Refs?的使用forwardRef?源碼示例解析
這篇文章主要為大家介紹了React?之?Refs?的使用和?forwardRef?的源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11React注冊(cè)倒計(jì)時(shí)功能的實(shí)現(xiàn)
這篇文章主要介紹了React注冊(cè)倒計(jì)時(shí)功能的實(shí)現(xiàn),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-09-09React實(shí)現(xiàn)下拉框的key,value的值同時(shí)傳送
這篇文章主要介紹了React實(shí)現(xiàn)下拉框的key,value的值同時(shí)傳送方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08JavaScript的React框架中的JSX語法學(xué)習(xí)入門教程
這篇文章主要介紹了JavaScript的React框架中的JSX語法學(xué)習(xí)入門教程,React是由Facebook開發(fā)并開源的高人氣js框架,需要的朋友可以參考下2016-03-03react使用axios實(shí)現(xiàn)上傳下載功能
這篇文章主要為大家詳細(xì)介紹了react使用axios實(shí)現(xiàn)上傳下載功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-08-08