react 原生实现头像滚动播放的示例

所属分类: 网络编程 / JavaScript 阅读数: 1786
收藏 0 赞 0 分享

本文介绍了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 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="" /></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)

  }
更多精彩内容其他人还在看

从新浪弄下来的全屏广告代码 与使用说明

从新浪弄下来的全屏广告代码 与使用说明
收藏 0 赞 0 分享

用js实现预览待上传的本地图片

用js实现预览待上传的本地图片
收藏 0 赞 0 分享

用javascript自动显示最后更新时间

用javascript自动显示最后更新时间
收藏 0 赞 0 分享

表单提交时自动复制内容到剪贴板的js代码

表单提交时自动复制内容到剪贴板的js代码
收藏 0 赞 0 分享

用roll.js实现的图片自动滚动+鼠标触动的特效

用roll.js实现的图片自动滚动+鼠标触动的特效
收藏 0 赞 0 分享

一段js小代码,计算距春节还有多少天

一段js小代码,计算距春节还有多少天
收藏 0 赞 0 分享

js中设计一段程序,让它能够打印自己的方法收集藏

js中设计一段程序,让它能够打印自己的方法收集藏
收藏 0 赞 0 分享

自动生成文章摘要的代码[JavaScript 版本]

自动生成文章摘要的代码[JavaScript 版本]
收藏 0 赞 0 分享

动态生成js类的实现方法

动态生成js类的实现方法
收藏 0 赞 0 分享

绝对经典的滑轮新闻显示(javascript+css)实现

这篇文章主要介绍了绝对经典的滑轮新闻显示(javascript+css)实现,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多