平武建站

react原生实现头像滚动播放的方法

这篇文章主要讲解了react原生实现头像滚动播放的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

成都创新互联专注于扎囊企业网站建设,响应式网站设计,电子商务商城网站建设。扎囊网站建设公司,为扎囊等地区提供建站服务。全流程按需网站策划，专业设计，全程项目跟踪，成都创新互联专业和态度为您提供的服务

react原生实现头像滚动播放的方法

之前需要的是下面这个效果

react原生实现头像滚动播放的方法

现在。。。

憋说话，先看看效果。

react原生实现头像滚动播放的方法

感觉很简单呀，直接渲染，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()//获取数据
      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多个，渲染出来，那酸爽，得了吧，全部渲染出来是不可能的了，这辈子都不可能全部渲染出来的了，看一下有没什么方法没有。

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

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

嗯？好像可以

还是原来的配方原来的味道


          {!!personAvatar.length && personAvatar.map((item, index) => {
            return 

              

              
{item.nickname.substring(0, 2)}***已参与活动

            

          })}
        
  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 = `
 
    
${data.nickname.substring(0, 2)}***已参与活动
`
    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原生实现头像滚动播放的方法
标题来源：http://pwwzsj.com/article/gjcsco.html

其他资讯