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="" /></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, index) => {
                        return <div className="avatar-wrap" key={index}>
                            <div><img src={item.avatar} alt="" /></div>
                            <div className="avatar-name">{item.nickname.substring(0, 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 {personAvatar} = this.state
        let data = this.listData.shift()
        if (!data) {
            this.getAvatar(1)
            return
        }
        if (!this.tmall.current) { return }
     
        personAvatar.push(data)
        this.setState({
            personAvatar
        })
        this.tmall.current.style = `transform: translateY(-${4}rem);transition: all 1s ease;`
        setTimeout(() => {
            this.tmall.current.style = `transform: translateY(0);`
            personAvatar.shift()
            this.setState({
                personAvatar
            })
        }, 1000)
        setTimeout(() => {
            this.changeCss()
        }, 3000)      
       }

好了，总算完成了。。