您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要讲解了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原生实现头像滚动播放的方法有进一步的了解,如果还想学习更多内容,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。