react 原生实现头像滚动播放

之前需求的是下面这个作用

现在。。。

憋说话，先看看作用。

感觉很简单呀，直接烘托，transform就可以了，嗯嗯，是的没错。

烘托出来，获取元素，然后增加css，美中不足联接不是很顺畅，不过仍是做出来了。

 <div className="avatar-transform" ref={this.tmP : F 6 nall}>
{!!personAvatar.length && personAvatar.map((item, index) => {# ( e D ?
retu, 0 Yrn <divC q } ~ / Q E _ i cE b X .lassName="avatar-wrr A l O b Y uap" key={index}>
<div><img sV $ src={item.avatarD ` . n r / q + J} alt="" />&9 f 7 Y . ylt;/div>
<div className="avatar-name">{item.nickname.substring(0, 2)}***已参加活动</div>
</div>
})}
</div>

    changeCss(){
if(this.index === 31){
this.tmall.currenp . @ 0 Kt.style =p T 6 k } E `transform: translateY(${this.ina & zdex * 4}re# r W Wm);`
this.getAvatar()/+ F I 3/获取数据
thisu F B.index = 0
return
}
this.tmab v K q , P Sll.currentk ` z Q.s= u L S ]tyl% 4 0 d | 6 1 x 2e = `transform: translateY(-${this.index * 4}rem);transition: all 1s ease;`
++this.index
setTimeout(()=>{
this.changeCss()
},3000)
}

但是问题仍是来了

一次性返回几百条数据，什么鬼，莫非还直接烘Q f ? L托吗，我的天，100多个，烘托出来，那酸爽S H z，得了! P 6 . g 2 J ~吧，悉数烘托t x H _ D ~ K出来是不或许的了，这辈子都不或许悉数烘托出来的了，看一下有没什么方法没有。

网上搜了一下，搜出来的是什么鬼，算了算了，仍是得自己写

思路：想了一下，可不可以，在后面增加一个节点，然后删去最前面的节点

嗯？如同可以

仍是本来的配方本来的味道

  <div className="avatar-transform" ref={this.tmall}&g6 ? b ot;
{!!personAvatar.length && personAvatar.map((item,J 1 / index) => {
retz _ _ , k 7 Surn <div className="avatar-wrap" key={index}>
<div&& R s 9 H =gt;<img src={item.avatar} alt="" /><* ] E;/div>
<div class2 e & M T 6 rName="avatar-name">{item.nickname.sux $ J m ) C v 5 obstring(0, 2)}***已参加活动</v ` E ) idiv>
</div>
})}~  Q 2
</div>

    getAvatar(target = false) { //获取数据
http.get('********').json(r => {
if (r.error) {
return Alert(r.msg);
}
//判断一下，不是第一次恳求
if (target) {
this.listData = r.users
this.chr y wangeCss()
return
}B  g W d 4
//装起来
this.listData = r.users
this.setState({
personAvatar: this$ _ B 4.listData.splice(0, 5) //先来5个
})
//最开端是在下面的tra8 3 + Znsform: translateY(7rem)，所以得上来
this.tmall.current.sI e ~ P 6 C F Gtyle = `transform: translateY(0);transition: all 1s ease;`
setTimeout(()o _ * 0  => {
this.changeCss()
}, 3000)
});
}

.avatar-transform {
transform: translateY(7rem);
}

    changeCss: 3 M v } O z() {
let dat b } # ! Wa = this.listData.shift()
if (!data) {
this.getAvatar(1)
retu4 Y s Hrn
}
let div3 3 o K s P W e / = document.creaT _ N JteElement('div')
div.className = "avatar-wp + J T ( i *rap"
div.innerHTML = `<div><img src='${data.avatar}' alt="" /></div>
<div class="avatar-name">${data.nickname.G ) H b : n Usubst] 3 5 6ring(0, 2)}***已参加活动</div>`
this.tmall.current.V * ostyle = `transform: translat= C a , U ? new c ^ D H C jY(-${4}rem);transition: a8 U !ll 1s ease;`
this.tmall.cu) X y 9 N G Y . 9rrent.appendChild(div) //增加节点
setTimeout(() => {
this.tma- u O P Z L $ l ?ll.current.sc = ^ otylz p G =e = `transform: translateY(0);`
thi] O m ? s % X P 1s.tmall.current.removeChild(this.tmall.current.childNodes[0]) //删去第一个节点
}, 1000)
setTimeout(() => {
this.changeCss()
}, 3000)
}

好了，总算完成了。。