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


Posted in Javascript onApril 21, 2020

本文介绍了react 原生实现头像滚动播放的示例,分享给大家,具体如下:

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

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

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

现在。。。

憋说话,先看看效果。

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)

  }

到此这篇关于react 原生实现头像滚动播放的示例的文章就介绍到这了,更多相关react 头像滚动播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
一个JS翻页效果
Jul 23 Javascript
javascript:json数据的页面绑定示例代码
Jan 26 Javascript
控制input输入框中提示信息的显示和隐藏的方法
Feb 12 Javascript
jQuery在ul中显示某个li索引号的方法
Mar 17 Javascript
javascript模拟php函数in_array
Apr 27 Javascript
js实现的动画导航菜单效果代码
Sep 10 Javascript
CSS中position属性之fixed实现div居中
Dec 14 Javascript
基于JavaScript实现通用tab选项卡(通用性强)
Jan 07 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
Nov 26 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
详解react-redux插件入门
Apr 19 Javascript
el-table表头根据内容自适应完美解决表头错位和固定列错位
Jan 07 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 #Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
Apr 21 #Javascript
javascript设计模式 ? 备忘录模式原理与用法实例分析
Apr 21 #Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
Apr 20 #Javascript
Vue的全局过滤器和私有过滤器的实现
Apr 20 #Javascript
深入浅析JavaScript中的in关键字和for-in循环
Apr 20 #Javascript
vue实现购物车功能(商品分类)
Apr 20 #Javascript
You might like
2019年漫画销量排行榜:鬼灭登顶 海贼单卷制霸 尾田盛赞鬼灭
2020/03/08 日漫
PHP面向对象编程快速入门
2006/10/09 PHP
从一个不错的留言本弄的mysql数据库操作类
2007/09/02 PHP
Windows7下PHP开发环境安装配置图文方法
2010/05/20 PHP
解析关于java,php以及html的所有文件编码与乱码的处理方法汇总
2013/06/24 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
2014/05/11 Javascript
Bootstrap+jfinal退出系统弹出确认框的实现方法
2016/05/30 Javascript
Three.js学习之文字形状及自定义形状
2016/08/01 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
2019/09/28 Javascript
python之模拟鼠标键盘动作具体实现
2013/12/30 Python
python控制台显示时钟的示例
2014/02/24 Python
深入解析Python中的集合类型操作符
2015/08/19 Python
Python的Twisted框架中使用Deferred对象来管理回调函数
2016/05/25 Python
python实现二维码扫码自动登录淘宝
2016/12/27 Python
深入理解Python中变量赋值的问题
2017/01/12 Python
matplotlib绘制符合论文要求的图片实例(必看篇)
2017/06/02 Python
利用python的socket发送http(s)请求方法示例
2018/05/07 Python
深入浅析python 中的匿名函数
2018/05/21 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
python数据挖掘需要学的内容
2019/06/23 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python+opencv实现车道线检测
2021/02/19 Python
基于Html5实现的react拖拽排序组件示例
2018/08/13 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
顶岗实习计划书
2014/01/10 职场文书
采购意向书范本
2014/03/31 职场文书
高中生社会实践心得体会
2016/01/14 职场文书
详解Redis复制原理
2021/06/04 Redis
vue项目支付功能代码详解
2022/02/18 Vue.js
Elasticsearch 索引操作和增删改查
2022/04/19 Python