本文介紹了react 原生實現頭像滾動播放的示例，分享給大家，具體如下：

之前需要的是下面這個效果

現在。。。

憋說話，先看看效果。

感覺很簡單呀，直接渲染，transform就可以了，嗯嗯，是的沒錯。

渲染出來，獲取元素，然後新增css，美中不足銜接不是很順暢，不過還是做出來了。

 <div className="avatar-transform" ref={this.tmall}>
          {!!personAvatar.length && personAvatar.map((item,index) => {
            return <div className="avatar-wrap" key={index}>
              <div><img src={item.avatar} alt="react 原生實現頭像滾動播放的示例" /></div>
              <div className="avatar-name">{item.nickname.substring(0,2)}***已參與活動</div>
            </div>
          })}
        </div>

 changeCss(){
    if(this.index === 31){
      this.tmall.current.style = `transform: translateY(${this.index * 4}rem);`
      this.getAvatar()//獲取資料
      this.index = 0
      return
    }
    this.tmall.current.style = `transform: translateY(-${this.index * 4}rem);transition: all 1s ease;`
    ++this.index
    setTimeout(()=>{
      this.changeCss()
    },3000)
  }

但是問題還是來了

一次性返回幾百條資料，什麼鬼，難道還直接渲染嗎，我的天，100多個，渲染出來，那酸爽，得了吧，全部渲染出來是不可能的了，這輩子都不可能全部渲染出來的了，看一下有沒什麼方法沒有。

網上搜了一下，搜出來的是什麼鬼，算了算了，還是得自己寫

思路：想了一下，可不可以，在後面新增一個節點，然後刪除最前面的節點

嗯？好像可以

還是原來的配方原來的味道

<div className="avatar-transform" ref={this.tmall}>
          {!!personAvatar.length && personAvatar.map((item,2)}***已參與活動</div>
            </div>
          })}
        </div>

  getAvatar(target = false) { //獲取資料
    http.get('********').json(r => {
      if (r.error) {
        return Alert(r.msg);
      }
      //判斷一下，不是第一次請求
      if (target) {
        this.listData = r.users
        this.changeCss()
        return
      }
      //裝起來
      this.listData = r.users
      this.setState({
        personAvatar: this.listData.splice(0,5) //先來5個
      })
      //最開始是在下面的transform: translateY(7rem)，所以得上來
      this.tmall.current.style = `transform: translateY(0);transition: all 1s ease;`
      setTimeout(() => {
        this.changeCss()
      },3000)

    });
  }

.avatar-transform {

 transform: translateY(7rem);

}

  changeCss() {    
   let data = this.listData.shift()
    if (!data) {
      this.getAvatar(1)
      return
    }
    let div = document.createElement('div')
    div.className = "avatar-wrap"
    div.innerHTML = `<div><img src='${data.avatar}' alt="react 原生實現頭像滾動播放的示例" /></div> 
    <div class="avatar-name">${data.nickname.substring(0,2)}***已參與活動</div>`
    this.tmall.current.style = `transform: translateY(-${4}rem);transition: all 1s ease;`
    this.tmall.current.appendChild(div) //新增節點
    setTimeout(() => {
      this.tmall.current.style = `transform: translateY(0);`
      this.tmall.current.removeChild(this.tmall.current.childNodes[0]) //刪除第一個節點
    },1000)
    setTimeout(() => {
      this.changeCss()
    },3000)

  }

到此這篇關於react 原生實現頭像滾動播放的示例的文章就介紹到這了,更多相關react 頭像滾動播放內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！