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 相关文章推荐
jquery 输入框数字限制插件
Nov 10 Javascript
jquery遍历checkbox的注意事项说明
Feb 21 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
js轮播图透明度切换(带上下页和底部圆点切换)
Apr 27 Javascript
Vue 页面切换效果之 BubbleTransition(推荐)
Apr 08 Javascript
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
react中使用css的7中方式(最全总结)
Feb 11 Javascript
微信小程序收货地址API兼容低版本解决方法
May 18 Javascript
基于vue+echarts 数据可视化大屏展示的方法示例
Mar 09 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
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP开发注意事项总结
2015/02/04 PHP
10条php编程小技巧
2015/07/07 PHP
关于扩展 Laravel 默认 Session 中间件导致的 Session 写入失效问题分析
2016/01/08 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
关于jQuery中的end()使用方法
2011/07/10 Javascript
js获取class的所有元素
2013/03/28 Javascript
自定义jquery模态窗口插件无法在顶层窗口显示问题
2014/05/29 Javascript
JavaScript Promise启示录
2014/08/12 Javascript
原生js仿jquery一些常用方法(必看篇)
2016/09/20 Javascript
深入理解Node.js的HTTP模块
2016/10/12 Javascript
手机软键盘弹出时影响布局的解决方法
2016/12/15 Javascript
web 屏蔽BackSpace键实例代码
2016/12/24 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
详解ECMAScript6入门--Class对象
2017/04/27 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
在NPM发布自己造的轮子的方法步骤
2019/03/09 Javascript
详解Vue路由自动注入实践
2019/04/17 Javascript
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
用Python实现一个简单的线程池
2015/04/07 Python
python 通过 socket 发送文件的实例代码
2018/08/14 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
python的setattr函数实例用法
2020/12/16 Python
C#实现启动一个进程
2016/10/01 面试题
开业庆典主持词
2014/03/21 职场文书
小学教师师德演讲稿
2014/05/06 职场文书
陈胜吴广起义口号
2014/06/20 职场文书
最美家庭活动方案
2014/08/31 职场文书
高一学年自我鉴定范文(3篇)
2014/09/26 职场文书
初中中等生评语
2014/12/29 职场文书
军训个人总结
2015/03/03 职场文书
餐馆开业致辞
2015/08/01 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis