這篇文章主要講解了react原生實現(xiàn)頭像滾動播放的方法，內(nèi)容清晰明了，對此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會有幫助。
成都創(chuàng)新互聯(lián)專注于扎囊企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站設(shè)計,電子商務(wù)商城網(wǎng)站建設(shè)。扎囊網(wǎng)站建設(shè)公司,為扎囊等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站策劃，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
之前需要的是下面這個效果
現(xiàn)在。。。
憋說話，先看看效果。
感覺很簡單呀，直接渲染，transform就可以了，嗯嗯，是的沒錯。
渲染出來，獲取元素，然后添加css，美中不足銜接不是很順暢，不過還是做出來了。
{!!personAvatar.length && personAvatar.map((item, index) => { return})}{item.nickname.substring(0, 2)}***已參與活動
重慶分公司
重慶分公司
changeCss(){
if(this.index === 31){
this.tmall.current.style = `transform: translateY(${this.index * 4}rem);`
this.getAvatar()//獲取數(shù)據(jù)
this.index = 0
return
}
this.tmall.current.style = `transform: translateY(-${this.index * 4}rem);transition: all 1s ease;`
++this.index
setTimeout(()=>{
this.changeCss()
},3000)
}但是問題還是來了
一次性返回幾百條數(shù)據(jù)，什么鬼，難道還直接渲染嗎，我的天，100多個，渲染出來，那酸爽，得了吧，全部渲染出來是不可能的了，這輩子都不可能全部渲染出來的了，看一下有沒什么方法沒有。
網(wǎng)上搜了一下，搜出來的是什么鬼，算了算了，還是得自己寫
思路：想了一下，可不可以，在后面添加一個節(jié)點，然后刪除最前面的節(jié)點
嗯？好像可以
還是原來的配方原來的味道
{!!personAvatar.length && personAvatar.map((item, index) => { return})}{item.nickname.substring(0, 2)}***已參與活動
getAvatar(target = false) { //獲取數(shù)據(jù)
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 = `
${data.nickname.substring(0, 2)}***已參與活動`
this.tmall.current.style = `transform: translateY(-${4}rem);transition: all 1s ease;`
this.tmall.current.appendChild(div) //添加節(jié)點
setTimeout(() => {
this.tmall.current.style = `transform: translateY(0);`
this.tmall.current.removeChild(this.tmall.current.childNodes[0]) //刪除第一個節(jié)點
}, 1000)
setTimeout(() => {
this.changeCss()
}, 3000)
}看完上述內(nèi)容，是不是對react原生實現(xiàn)頭像滾動播放的方法有進一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
