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 相关文章推荐
showModelessDialog()使用详解
Sep 07 Javascript
IE和Firefox下event事件杂谈
Dec 18 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
JavaScript的递归之递归与循环示例介绍
Aug 05 Javascript
ajax提交表单实现网页无刷新注册示例
May 08 Javascript
javascript实现了照片拖拽点击置顶的照片墙代码
Apr 03 Javascript
Bootstrap 组件之按钮(二)
May 11 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
Dec 04 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 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
德劲1102收音机的打理维修案例
2021/03/02 无线电
MySQL数据源表结构图示
2008/06/05 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
php读取目录所有文件信息dir示例
2014/03/18 PHP
php中解析带中文字符的url函数分享
2015/01/20 PHP
JavaScript 特殊字符
2007/04/05 Javascript
prototype Element学习笔记(Element篇三)
2008/10/26 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
悬浮数字的实现案例
2014/02/19 Javascript
常见浏览器多长时间会提示“脚本运行时间过长”总结
2014/04/29 Javascript
推荐JavaScript实现继承的最佳方式
2014/11/11 Javascript
js中数组排序sort方法的原理分析
2014/11/20 Javascript
JS原型链怎么理解
2016/06/27 Javascript
js输出数据精确到小数点后n位代码
2016/07/02 Javascript
jQuery菜单实例(全选,反选,取消)
2017/08/28 jQuery
nodejs 日志模块winston的使用方法
2018/05/02 NodeJs
webpack 静态资源集中输出的方法示例
2018/11/09 Javascript
js实现的格式化数字和金额功能简单示例
2019/07/30 Javascript
vue子传父关于.sync与$emit的实现
2019/11/05 Javascript
pycharm 使用心得(八)如何调用另一文件中的函数
2014/06/06 Python
对于Python中RawString的理解介绍
2016/07/07 Python
python实现Flappy Bird源码
2018/12/24 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
django框架两个使用模板实例
2019/12/11 Python
python递归函数用法详解
2020/10/26 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
Larsson & Jennings官网:现代瑞士钟表匠
2018/03/20 全球购物
好的自荐信包括什么内容
2013/11/07 职场文书
法律进学校实施方案
2014/03/15 职场文书
护理专业自荐书
2014/06/04 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
幼儿园开学通知
2015/04/24 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
python 网络编程要点总结
2021/06/18 Python
vue实现锚点定位功能
2021/06/29 Vue.js
Win11无法访问设备和打印机 如何解决页面空白
2022/04/09 数码科技