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+CSS设置img在DIV中只显示Img垂直居中的部分
Oct 24 Javascript
js实现带有介绍的Select列表菜单实例
Aug 18 Javascript
JQuery组件基于Bootstrap的DropDownList(完整版)
Jul 05 Javascript
jQuery延迟执行的实现方法
Dec 21 Javascript
Angularjs 与 bower安装和使用详解
May 11 Javascript
element-ui中select组件绑定值改变,触发change事件方法
Aug 24 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
解决layui批量传值到后台操作时出现传值为空的问题
Sep 28 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
Jul 15 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
Mar 01 Vue.js
解决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下通过系统信号量加锁方式获取递增序列ID
2009/09/25 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
Java中final关键字详解
2015/08/10 PHP
jquery中prop()方法和attr()方法的区别浅析
2013/09/06 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
JavaScript中的alert()函数使用技巧详解
2014/12/29 Javascript
Javascript定义类(class)的三种方法详解
2015/03/13 Javascript
javascript中offset、client、scroll的属性总结
2015/08/13 Javascript
理解 JavaScript Scoping &amp; Hoisting(二)
2015/11/18 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
webpack 打包压缩js和css的方法示例
2018/03/20 Javascript
JS实现的图片选择顺序切换和循环切换功能示例【测试可用】
2018/12/28 Javascript
JavaScript中concat复制数组方法浅析
2019/01/20 Javascript
Vue 表情包输入组件的实现代码
2019/01/21 Javascript
js实现中文实时时钟
2020/01/15 Javascript
koa2的中间件功能及应用示例
2020/03/05 Javascript
js异步接口并发数量控制的方法示例
2020/11/22 Javascript
python使用urlparse分析网址中域名的方法
2015/04/15 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
解决Django生产环境无法加载静态文件问题的解决
2019/04/23 Python
python 判断字符串中是否含有汉字或非汉字的实例
2019/07/15 Python
python 动态绘制爱心的示例
2020/09/27 Python
python和C++共享内存传输图像的示例
2020/10/27 Python
土耳其时尚潮流在线购物网站:Trendyol
2017/10/10 全球购物
意大利领先的线上奢侈品销售电商:Eleonora Bonucci
2017/10/17 全球购物
罗马尼亚在线杂货店:Pilulka.ro
2019/09/28 全球购物
机械专业毕业生推荐信范文
2013/11/25 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
端午节活动策划方案
2014/03/09 职场文书
民主生活会批评与自我批评总结
2014/10/17 职场文书
离婚协议书范本(通用篇)
2014/11/30 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
Python实现日志实时监测的示例详解
2022/04/06 Python
mysql 乱码 字符集latin1转UTF8
2022/04/19 MySQL