DDR爱好者之家 Design By 杰米
本文介绍了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) }
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
RTX 5090要首发 性能要翻倍!三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。
据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。
更新日志
2024年04月20日
2024年04月20日
- 《阿杜6CD合集》[WAV分轨][5.8G]
- 古巨基2007-MOMENTS[香港][WAV整轨]
- 龙音海文版-小河淌水-陈爱娟古筝独奏之二[WAV+CUE]
- 中国首张折服小泽征尔二胡专辑:雨果唱片《闵惠芬》[WAV+CUE]
- 杨千嬅.2009-千嬅盛放3CD【新艺宝】【WAV+CUE】
- 萧亚轩.2008-3面夏娃【维京】【WAV+CUE】
- 谭咏麟.2015-银河岁月40载演唱会4CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 闵惠芬《凤吟》24K金碟[低速原抓WAV+CUE]
- 姚斯婷.2024-《新老广的半退休生活》星外星[低速原抓WAV+CUE]
- 徐小凤-新曲与精选(88843082072,Re2014).iso
- 王菲 《唱游 Remastering》DXD绝版母带[WAV分轨][4.2G]
- 张信哲《心碎深处》[WAV分轨][401M]
- 谭咏麟《雾之恋》[Flac][865M]
- 张学友.1991-每天爱你多一些演唱会912CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】
- 许志安.1999-真心真意许志安99演唱会2CD(2024环球红馆40复刻系列)【环球】【WAV+CUE】